2020.10.02 WEBWebデザイン Illustratorのグラフツールを使えば、簡単にグラフを作成できます（棒グラフ編） 先日、グラフの画像データを作成する機会がありました。 ExcelやPowerPointで作成してもよかったのですが、もう少しデザイン性をもたせたかったので、Illustratorで作成することにしました。 Excelと同じように表に数値を入れるだけで作成でき、Illustratorの機能を用い [...]
2020.09.30 WEBWeb全般 スマートフォンやタブレットでベーシック認証が表示されない場合どうしたらいい？ 例えば会員向けのページのように、特定のユーザーのみに閲覧させたいページがある場合、パスワードを入れないとページが開かないパスワード認証をかけることが一般的です。 パスワード認証の中でも「ベーシック認証」と呼ばれる認証は、比較的簡単に設定することができるため、広く使用されています。 しかし、パソコン [...]
2020.09.26 WEBWebデザイン ScrollTriggerを利用してwebサイトスクロール時にアニメーションを追加する（導入編） お客様のwebサイト制作を手伝わせていただくにあたり、スクロールに合わせてアニメーションを追加したいというご要望をいただくことが多くなりました。アニメーション自体はCSSの進歩により比較的簡単に実装できるようになりましたが、「スクロールに合わせて」という要件にはJavaScriptを併用する必 [...]
2020.09.23 WEBユーザビリティ・UX・UI webサイト制作に欠かせない「ワイヤーフレーム」の役割について理解しよう 私たちのようなweb制作会社では、通常、webサイトを作成する際にワイヤーフレームを作成します。 一般の方からすると聞きなれない言葉かもしれません。 今回はそのワイヤーフレームの役割について考えてみたいと思います。 INDEXワイヤーフレームとは？ワイヤーフレームとデザインの関わりまとめ [...]
2020.09.14 WEBWeb全般 YouTube IFrame Player APIを利用してwebサイトに動画を埋め込む（導入編） お客様のwebサイト制作を手伝わせていただくにあたり、ページ内に動画を掲載したいというご要望をいただくことが多くなりました。動画の掲載方法は様々ですが、YouTubeの普及に伴い、同サービスが提供する埋め込みタグやAPIサービスを利用する形での対応が一般的となってきています。 そこで本記事では [...]
2020.09.14 WEBシステム開発 過去のコードをComposition APIを使って書き直してみる（前編） VueのメジャーバージョンアップがQ3 2020に予定されており、Roadmap通りであればもうすぐ公開されます。 そこで、Vue3の目玉のひとつである「Composition API」を使って、過去に当ブログでご紹介したコードを書き直してみたいと思います。 今回は前編として、Composit [...]
2020.09.09 WEBシステム開発 Windowsで至高のターミナル生活を求めて(Windows Terminal編) 前回の記事「Windowsで至高のターミナル生活を求めて(Alacritty編)」ではクロスプラットフォーム対応のAlacrittyをご紹介しました。 今回はMicrosoft謹製の「Windows Terminal」をご紹介します。 INDEX1. Windows Terminalのインストー [...]
2020.08.28 WEBWebデザイン YouTube動画のサムネイル作成に！PhotoshopとIllustratorで袋文字を作ってみました 写真の上に文字を配置するとき、文字が背景と同化して見づらくなってしまったことはありませんか？こんな時、袋文字が役に立ちます。 袋文字とは、文字を別の色で縁取りしたものを指します。素の文字よりもインパクトが出て、さらに可読性が増すため、YouTubeのサムネイルなどにもよく使われます。 今回はそん [...]
2020.08.07 WEBWebデザイン CSSアニメーションを使ったリンクボタンを作ってみよう！（実践編） 前回の記事（基礎編）ではCSSアニメーションの概要やanimationプロパティの種類など、基本的な情報をまとめました。 今回は実際にアニメーション表現のあるリンクボタンを作りながら、CSSアニメーションの使い方とその効果を解説していきます。 INDEXCSSアニメーションのおさらいリン [...]
2020.08.06 WEBシステム開発 google/wireを使ってGoでDI(dependency injection)してみる 今回は、GoでDI（dependency injection）してみたいと思います。 GoでDI用のパッケージはいくつかありますが、今回は「google/wire」を利用します。 GitHub google / wirehttps://github.com/google/wire IN [...]
2020.07.28 WEBWeb全般 アウトライン化されたaiデータから、できる限りテキスト情報を取り出す方法 「パンフレットの情報をもとにwebページを構築しなくてはならないが、提供いただいたイラレデータがアウトライン化されていて、テキストがコピーできない！」 私がエディターとして仕事をしているとき、まれに遭遇する事態です。 データがアウトライン化されていると、テキスト情報を抽出（コピー）することができま [...]
2020.07.21 WEBWebデザイン Adobe XDのコンポーネントを利用してホバーアクションをデザインする webデザインを作成する際についつい忘れがちになってしまうのがユーザーインタラクション時のデザイン（マウスホバーやボタンのクリックなど）です。 弊社ではPhotoshopでデザインをする際には別途レイヤーを作成したりPSDを分けて用意したりと仕様に応じて様々な工夫をしていますが、AdobeXD（以 [...]
2020.07.17 WEBWeb全般 Google マップ・ストリートビューをレスポンシブデザインのwebサイトに埋め込む方法をご紹介！ 自社のwebサイトに「画像」で作成した地図を表示していませんか？ 「画像」で作成した地図の場合、スマートフォンで閲覧すると画像が小さくなり、文字や地図記号を認識することができなくなってしまう恐れがあります。その事態を避けるためにGoogleマップやストリートビューをwebサイトに埋め込むことを [...]
2020.07.16 WEBシステム開発 CodeIgniter3にTwigを連携して使う アーティスではシステム開発にPHPのフレームワークであるCodeIgniterを使うことがあります。 また、PHPのテンプレートエンジンであるTwigを導入することもあります。今回はこの2つを連携して使っていきたいと思います。 INDEX本記事での筆者の環境使ったことがない方のために少しだけ [...]
2020.07.09 WEBシステム開発 GKEにArgo CDを導入してアプリケーションをデプロイする アーティスではいくつかのウェブアプリケーションをGoogle Kubernetes Engine上のk8sにデプロイしています。イメージをCloud Buildでビルドした後、マニフェスト用のリポジトリにPushがあるとCloud Buildで自動的にApplyを行っています。 現状でもとくに [...]
2020.07.03 WEBシステム開発 Windowsで至高のターミナル生活を求めて(Alacritty編) ターミナルのいい季節になってきた今日この頃。またお会いしましたね。前回の記事「Windowsで至高のターミナル生活を求めて（MSYS2編）」ではMSYS2をご紹介しました。 今回はクロスプラットフォームのGPUを使用する高速なターミナルエミュレーターが売りのRust製のAlacrittyをインスト [...]
2020.06.30 WEBWebマーケティング Google広告でABテストをするときに便利な「下書きとテスト」機能の使い方 リスティング広告の費用対効果を高めるうえで、PDCAサイクルを実施して広告やランディングページのクリエイティブを最適化することは必要不可欠なものになります。 PDCAサイクルの過程でよく使われる検証方法がABテストです。今回は、Google広告でABテストをする際に便利な「下書きとテスト」機能 [...]
