webデザイン

ヘッダーデザインの役割に応じた文章表現の考え方と構成方法。Photoshop編

魅せる伝えるヘッダーデザインを作成する5つの工程の4番目、ここでは④ 文章の表現について解説します。

デザインにおける活字は視覚的にテーマ&コンセプトを伝える重要な役割があります、可読性や視認性を高めるために適切に配列してグラフィカルに整えよう。

  • ① 基調と概念
  • ② 構成要素の配置
  • ③ 色彩の統一
  • ④ 文章の表現
  • ⑤ 細部の作り込み

伝わりにくいテキスト

↑ パっと見ではキャッチコピーの意味が汲み取りにくいですね・・

④ 文章の表現

テンプレにはめ込んでみるとなんだか少し説明っぽく感じてしまいます

テンプレ

① 基調と概念の工程で「おとなしい大人になれない、おとなげない大人達へ」というキャッチフレーズを考えてみましたが、《おとなげない》の言葉ひとつでも《おとなしくない》《やんちゃ》などの意味合いも含まれるので、、

ここは「おとなげない大人達」と、よりキャッチーな響きで行ってみます。

テンプレ

少し厚ぼったく感じるのでスタイリッシュ感のある細身の書体に変更し、《おとなげない ⇔ 大人》双方の言葉に含まれる対比の意味を表現するため大きさを変えてみよう。

細身の書体

さらに対比を強調するために書体をずらし、枠に収めることで視覚的に《整列できないおとなげなさ ⇔ 規律ある正統な大人》といった印象を与えてみると・・

うんっ、それっぽくなりましたね♪

文章表現完成

ここでは文章表現の考え方と構成方法について解説しましたが、活字の意味を理解したうえで表現を加えていくことで、視覚的に基調や概念を伝えることが可能になっていきます

テンプレ文章表現

続いて、ヘッダーデザインを作成する最後の工程 ⑤ 細部の作り込み細部(ディティール)へのこだわりがWEBデザインに差をつける。】に進んでいきます。

基調と概念構成要素の配置色彩の統一文章の表現細部の作り込み
スリームデザインの無料メールマガジン

ピックアップ記事

  1. 思わずクリックしてしまう画像でアクセスアップ!2番目に簡単なブログのアイキャッチ…
  2. 「特訓Photoshopプロのテクニック教えます!」のWEB版を『無料』で一般公…
  3. 「ブロガーがこんなの読んだら反則レベルでしょっ、、」と思うくらい文章力が上がりそ…
  4. WordPress日本語有料テーマの決定版っ!TCDシリーズのまとめ
  5. WordPressの使い方に迷ったらまずこの記事をチェック!すごく参考になる秀逸…

関連記事

  1. webデザイン

    えっ!?この画像動いてるし…妙に不思議なシネマグラフをPhotoshopで作ってみよう。

    一見何気ない画像かと思いきや、画像の一部分をループして動かすことで不思…

  2. キュレーション

    インスピレーションを掻き乱されるほどのPhotoshop超絶テクニック!Youtube動画12選。

    デザイナーやクリエイターなら誰しも、自分の想像を超えるような作品を生み…

  3. 3分の話

    3分でわかる想像力(創造力)を鍛える方法

    想像力はクリエイティブ(創造的)な仕事をする上でとても重要な要素です、…

  4. webデザイン

    フォトショップでフワフワ・フサフサな動物の毛を表現するブラシの上手な活用方法。

    フォトショップのブラシを上手に活用するとさまざまな表現が可能になります…

  5. 3分の話

    PhotoshopでGIFアニメーションをトゥイーンで作って保存する方法。

    Photoshopではタイムラインを使うことで動的なGIFアニメーショ…

  6. webデザイン

    デザインのレイアウトが苦手なひとが今日から得意になってしまう、たった3つの方程式!

    ポスターやホームページのバナー、アイキャッチ画像など人目を引き付けるデ…

Wordpress日本語テーマのまとめ
photoshop日本語チュートリアル

よく読まれている人気の記事

最近の記事

  1. 「特訓Photoshopプロのテクニック教えます!」のWEB…
  2. 「いつも締め切りに追われてしまう」そんな人がミッションを成し…
  3. Photoshop CCのメニュー文字やツールバーが異常に小…

思考系のおもろい記事

ブログラ
  1. コピーライティング

    「ブロガーがこんなの読んだら反則レベルでしょっ、、」と思うくらい文章力が上がりそ…
  2. 3分の話

    柔軟な思考を大切にしたいクリエイター必読の5冊。私の頭をグニャングニャンに柔らか…
  3. SEO

    WordPressの使い方に迷ったらまずこの記事をチェック!すごく参考になる秀逸…
  4. フォトショップ

    見ているだけで「Photoshopの実践的な使い方が学べる」日本語解説付き動画の…
  5. キュレーション

    必読!安易に起業ブームに乗っかる前に…絶対に読んでおきたい【おすすめのビジネス書…
PAGE TOP