KDC : Web演習 第10回

第10回は、Webサイト制作におけるデザインモックアップの活用について学びます。

今日はPhotoshopを使います

目次

デザインモックアップとは

デザインモックアップは、自分のデザインが実際にどのように使用されているのかを表現することができるツールです。
※本授業ではデザインモックアップ=PSDモックアップとしてお話しします。

ポートフォリオ制作にて、自分の作品をただの平面のまま並べていませんか?
デザインモックアップを使用することで、自分の作品が実際に使用される場合のイメージを想像しやすくなり、立体的なイメージで見ることが出来るため、デザインの説得力が増します。
Webサイト制作においても、デザインモックアップで作成したイメージを取り入れることにより、サイト全体の印象もぐっと良くなります。

今回はフリーで使用できるモックアップを活用し、今後のポートフォリオWebサイト作成時に活かせるよう、使い方を(画像の書き出し方法も含めて)学んでいきます。

デザインモックアップは、紙のポートフォリオ作成時にも活用できるツールですので、見せ方で煮詰まってる方はぜひ参考にしてください。

参考サイト

Pick up

↑いずれも海外製 素材サイト

注意点

  1. デザインモックアップサイトは、海外製サイトが多い
    • 書いてある内容が分からないときは「DeepL」で調べること
    • 会員登録が必要なサイトもある。慣れてないひとは無理せず別のサイトから探そう
      • メールアドレスのみで登録出来る場合が多い
    • ダウンロードまでにいくつもサイトを経由する場合がある
      • (例)ダウンロードボタンを押す→別サイトにリダイレクト→またダウンロードボタンがある…
  2. ライセンスに注意
    • 素材サイトごとに利用ライセンスがある
    • 商用利用する場合には特に注意が必要
  3. クライアントワークの場合はあくまでも”イメージ画像”であることを伝える

この記事を書いた人

Sunnana Inc. / Web Designer
熊デザ16期生。紙媒体広告やWebのデザイン、サイトの立ち上げから運営まで幅広く担当。料理にどハマリ中。

目次