目指せ!万能クリエーター!!デザイン・コーディングプログラミングまで幅広く書いています。

準備中

スポンサーサイト

このエントリーをはてなブックマークに追加
上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。
  1. --/--/--(--) --:--:--|
  2. スポンサー広告

字詰めについてカンタンにまとめてみました*デザイン*

このエントリーをはてなブックマークに追加
私、普段ショップに商品ページを作ってるのですが、今更ですが思うとこあってメモ!

“ Webは字詰めが甘い”

はい、ゴメンナサイ。
Webと言っても、ピンキリ。いろいろあります。楽天やYahooのモールのランディングページも含みます。もちろん、素敵なページはたくさんあります!
大半は忙しい最中、スタッフが空き時間フォトショップでサムネイルやバナーを作ってるのだと思います。

うちも同様、商品ページをランディングページを使ってます。テーブルに画像をはめ込むだけですが。
あるブログでこの指摘を受けた時とっても恥ずかしかったです。

前の会社でロゴやマークを作る時は必死でやってたのにいつの間にかやらなくなっていた事に気付きました。反省…。
と言う事で今日は商品ページの為の字詰めについてまとめてみます。

1.第一歩:文字をぎゅっと詰めてみる

バランスの悪い文字と文字の間を詰めてみよう。

本日はフォトショップを使用しましたが
イラレでもショートカットは一緒。



文字ツールを選択し、文字間を調整したい文字の間にカーソルを合わせてAlt+←or→で文字間を調整できます。
もちろんイチイチウィンドウで数値で調整できますが、とってもめんどくさいのでAlt+←or→で調整がおススメ。

色々な情報をかき集めてみると特に気を付ける点は次の通り。
  • ひらがな・カタカナは接点に気を付けて詰める
  • フォルムがほぼ真四角に近いような、余白の少ない漢字はやや空ける
とりあえず、上記2点を気を付けて文字を素で打った(べた組orベタ打ち)文字を観察。字を詰めてみました^ ^。



修正点はあると思うけど、ベタ組みよりはずーっと読みやすくなってると思います。

2.第二歩:フォントのサイズや細さも変えてみる

さらに読みやすくするために研究。
  • 小さい「ぁ」「ゅ」「っ」はしっかり詰める
  • 「」括弧などは一番細いフォントにする
  • 「。」「、」「!」といった句読点などはしっかり詰める
  • 助詞はサイズを一回り小さくする

3.まとめ

ネットショップで受注業務をしながら、バナーや商品ページを作るのはとても大変だと思います。
とはいえタイトルやキャッチはちゃんと読んでほしいです。ちょっとしたコツを知ってれば時短や見栄えもUPすると思います。
スポンサーサイト
  1. 2013/08/03(土) 12:33:41|
  2. デザイン
  3. | トラックバック:0
  4. | コメント:0
<<カスタムシェイプをつくってみた*フォトショップ* | ホーム | htmlメルマガを作ろう*メルマガ*>>

コメント

コメントの投稿


管理者にだけ表示を許可する

トラックバック

トラックバック URL
http://gatoprateado.blog.fc2.com/tb.php/56-143d5184
この記事にトラックバックする(FC2ブログユーザー)
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。