2021.11.26 BUSINESS仕事効率化ツール Googleスプレッドシートの「条件つき書式」「カスタム数式」を使って、チーム内での効率的な進捗管理を！ 私の日々の業務の一つに、お客様に代わってwebページをCMSで作成する作業があります。ときには1サイト300ページを超える大規模なサイトの移行・改修を請け負うことも。 作業はチーム（複数人）で行うため、進捗管理が欠かせません。どのページがどこまで作成されているのかを一目で確認する必要があります。 [...]
2021.10.27 WEBWebデザイン WebP形式の画像をPhotoshopで読み込み・編集・書き出しができる！プラグイン「WebPShop」の導入方法をご紹介 WebPとはJPEGやPNG・GIFなど代表的な3種類の形式と比べて画像の圧縮率が高く、アルファチャンネル（透過）にも対応している汎用性が高い画像フォーマットです。 iOS 14/iPadOS 14およびmacOS 11のSafari14で、WebP形式画像が正式にサポートされ、WebPを導入する [...]
2021.09.29 WEBWebデザイン PowerPointがなくても大丈夫！ Googleスライドを使ってバナーや画像ボタンを作る方法 前回の記事「画像編集ソフト要らず！パワーポイントを使って簡単にバナーや画像ボタンを作る方法」 では、PowerPointを使った基本的なバナーの作り方をご紹介しました。 前回の記事を執筆した後、「そもそもMicrosoft Officeをインストールしていない人はどうしたらいいのだろう」と思い調べ [...]
2021.08.31 WEBWebデザイン 画像編集ソフト要らず！パワーポイントを使って簡単にバナーや画像ボタンを作る方法 ホームページに掲載したり、web広告に利用したりと、なにかと必要な機会の多いバナー。 ホームページの更新でちょっとしたバナーの文言変更や写真の差し替えがしたいとき、 制作会社に頼むのは面倒だし、費用がかさむ… でもIllustratorやPhotoshopなどの画像編集ソフトは持っていないし、持 [...]
2021.08.03 WEBWebデザイン SVGってなに？PhotoshopやIllustratorでSVG画像を書き出す方法を解説します。 JPGやGIFといった画像拡張子のほかに、「SVG」という拡張子を目にしたことがあると思います。 JPGやGIF等の「ビットマップデータ」とは違い、SVGは「ベクターデータ」に分類されます。ベクターデータには拡大しても画質が落ちないという特徴があり、昨今のwebサイトでは、レスポンシブやRetin [...]
2021.06.29 WEBユーザビリティ・UX・UI アプリ・Webサイトを専門家が評価する「ヒューリスティック評価」とは？【目的・調査・評価方法】 前回のブログにて、ユーザビリティテストについて解説しました。 今回は、ユーザビリティテストと同様に、ユーザーにとって使いやすいWebサイト・アプリを作るのに有効な「ヒューリスティック評価」をご紹介します。 数多く存在するWebサイト・アプリにとって、使い勝手のよさは重要なポイントです。ヒューリステ [...]
2021.06.04 WEBWebデザイン IllustratorデータをPhotoshopで開く！ レイヤーを保持したままaiをpsdに変換する方法 Illustratorでの制作物にPhotoshopで効果を付けたいときや、 aiデータをpsdデータに変換する必要があるとき、ただIllustrator上でpsdデータを「開く」をしても、レイヤーは統合されてしまいます。 今回はIllustratorで作成したデータのレイヤーを保持しながら、Ph [...]
2021.05.14 WEBユーザビリティ・UX・UI webサービスやwebサイトの開発・改善に役立つ、ユーザビリティテストとは？【準備から実施・分析までの流れ】 自社のwebサイト・webサービスが、果たしてユーザーのニーズに応えられているのかと不安になったことはありませんか？ ユーザビリティテスト（UT）とは、サイトの改善において、実際にサイトのターゲットユーザーに利用してもらい、操作感やサイトの構成に関する課題を発見する手法のことです。開発・制作者の視 [...]
2021.04.27 WEBWeb全般 自分だけの地図を作って共有できる！Googleマイマップ ～データインポート編～ 過去2回に分けて、Googleマイマップの作成・共有の方法をご紹介しました。 自分だけの地図を作って共有できる！Googleマイマップ ～オリジナルMap作成編～ 自分だけの地図を作って共有できる！Googleマイマップ ～オリジナルMap共有編～ 今回は、大量の住所を一括でマイマップに登録できる [...]
2021.03.03 WEBWebデザイン パスファインダーよりも手軽！Illustrator消しゴム・はさみ・ナイフツールの使い方 前回のブログで、パスファインダー機能を使って画像を分割したり、合体したりする方法をご紹介しました。 前回記事「オブジェクトを組み合わせて複雑な図形をつくる！Illustratorのパスファインダー機能をご紹介」 今回は、そんなパスファインダー機能を使わずとも図形を加工できる、消しゴムツール・は [...]
2021.01.27 WEBWebデザイン 光って目立つ！Illustratorのアピアランス機能で「光る文字」を作ろう サイトのバナーやアイキャッチを作っていると、文字に光沢を持たせて重厚な感じを出したいときや、文字が光って浮かび上がるような表現をしたい、と思うことがあります。 以前、Illustratorのアピアランス機能を使って袋文字の作り方をご紹介しました。 YouTube動画のサムネイル作成に！Photos [...]
2020.12.25 WEBWebデザイン オブジェクトを組み合わせて複雑な図形をつくる！Illustratorのパスファインダー機能をご紹介 今回は、Illustratorの機能の一つ「パスファインダー」機能についてご紹介します。 パスファインダーはオブジェクト同士の合体、分割、型抜きなどができ、知っておくと複雑な図形を簡単につくることができます。手作業でパスを使ってかたどることが難しい図形も、工夫すれば簡単に作ることができます。 I [...]
2020.11.30 WEBWebデザイン Illustratorのグラフツールを使えば、簡単にグラフを作成できます （応用編～複合グラフ・立体表現～） 前回のブログにて、Illustratorで棒グラフを作る方法をご紹介しました。 前回記事「Illustratorのグラフツールを使えば、簡単にグラフを作成できます（棒グラフ編）」 今回は少し複雑な棒・折れ線複合グラフと、立体的な円グラフの作り方をご紹介します。 INDEX棒・折れ線複合グ [...]
2020.10.26 WEBWebデザイン Illustratorでイラストやロゴをトレースし、ベクターデータに変換してみよう 画像や写真などのラスターデータ、はたまた手書きの文字などをトレースし、ベクターデータに変更したいと思ったことはありませんか？ ベクターデータのメリットとして、サイズの変更をしてもデータのクオリティが変わらないことが挙げられます。そのため、名刺やパンフレット等の作成によく使用されています。 ラスタ [...]
2020.10.02 WEBWebデザイン Illustratorのグラフツールを使えば、簡単にグラフを作成できます（棒グラフ編） 先日、グラフの画像データを作成する機会がありました。 ExcelやPowerPointで作成してもよかったのですが、もう少しデザイン性をもたせたかったので、Illustratorで作成することにしました。 Excelと同じように表に数値を入れるだけで作成でき、Illustratorの機能を用い [...]
2020.08.28 WEBWebデザイン YouTube動画のサムネイル作成に！PhotoshopとIllustratorで袋文字を作ってみました 写真の上に文字を配置するとき、文字が背景と同化して見づらくなってしまったことはありませんか？こんな時、袋文字が役に立ちます。 袋文字とは、文字を別の色で縁取りしたものを指します。素の文字よりもインパクトが出て、さらに可読性が増すため、YouTubeのサムネイルなどにもよく使われます。 今回はそん [...]
2020.07.28 WEBWeb全般 アウトライン化されたaiデータから、できる限りテキスト情報を取り出す方法 「パンフレットの情報をもとにwebページを構築しなくてはならないが、提供いただいたイラレデータがアウトライン化されていて、テキストがコピーできない！」 私がエディターとして仕事をしているとき、まれに遭遇する事態です。 データがアウトライン化されていると、テキスト情報を抽出（コピー）することができま [...]
