Web用画像の作成

OVERVIEW

介護施設の入居フローチャートや、ECサイト用の商品バナーの作成。

YEAR 2020~


◆商品比較バナー

●要件
ECサイト用の商品比較バナーの作成

●使用ツール
Illustrator、Photoshop

●制作時間
6時間(素材集め:30分、色の選定・配置バランス:1時間、フォント選定30分、他:全体の修正)

●工夫点

  • 機能が異なる2種類の施工管理ソフトを、視覚的にわかりやすいように対照的な背景で目を引く色にした。

  • アイコンを大きめに設置することで、何の機能が使用できるのか、できないのかが一目瞭然となるようにした


◆ECサイト用バナー

●要件
ECサイト用の注意喚起バナー(法人限定商品)

●使用ツール
Illustrator

●制作時間
2時間
(全体の構成30分、フォント選定30分、全体バランス修正1時間)

●工夫点

  • 購入者が、流し読みしていても気づけるようなデザインとして、警告を表す赤色を上部と下部に配置。

  • 中央部分には、蛍光ペンのマーカーで引いたようなデザインをして、注意喚起と必要事項が端的にわかるデザインにした。



◆フローチャートのリメイク


【実際に使用されているサイトはこちら】


●要件
パンフレットの味気ないフローチャートのデザインを一新。
今回は、Webサイトにてレスポンシブデザインに対応したフローチャートの作成。(介護施設の入居までの手順)

●使用ツール
Illustrator

●制作時間
10時間(素材集め:1~2時間、構成1時間、色合いの選定・全体の配置バランス:1時間~2時間、フォント選定1~3時間、PC版からスマホ版デザインの作成1時間、他:修正)

●工夫点

  • すでに出来上がっているサイトに、フローチャートを入れ込む形となったため、サイトのコーポレートカラーや全体の色調になじむように色合いには試作を重ねた。

  • 黄緑色部分は、単色ではなく和紙の素材を使用して柔らかな印象になるようにした。

  • 年配の方にも視認しやすいようなアイコン、数字の丸文字フォント、文字の大きさ(14pt)などにこだわった。


【スマートフォン用】


【PC用】


ECサイト向けバナー

●要件

自社ソフトのお問い合わせバナーの制作。


●使用ツール

Adobe Illustrator


●製作期間

各1日


●工夫点

  • 画像サイズによって、伝えたいことが埋もれないように文字組みを調整。
  • コーポレートカラーになぞらえた紺色と、黄色を使用し、落ち着いた印象の中に、はっきりとしたデザインにしました。