初心者向け！Webサイトのデザイン制作フロー（サイズとフォント）
ブログを制作する時にやったこと、二回目はサイトデザインを行います。
今回作るのはデザインカンプというものです。
デザインカンプとはWebサイト制作の場合、ワイヤーフレームに肉付けをした完成形のイメージのことで、人によってはモックアップと呼ぶかたもおられるようです。
ちなみにモックアップは実物に似せた模型という意味だそうで、主にプロダクトデザインで使われているようです。
僕も次回からはモックアップと呼ぶことにします。なぜならカッコいいから。
制作ツール
Illustrator（イラストレーター）やPhotoshop（フォトショップ）など、自身が慣れているツールで制作しましょう。
ここではPhotoshopでやっていきます。いいかしら？
初めて作る方は環境を整えましょう！Adobe（アドビ）から体験版が提供されてますので、体験版を使用するかGIMP（ギンプ）というフリーソフトがいいとおもいます。
サイトの最大幅を決める
新規でファイルを作る前に、幅は事前に決めておきましょう。
縦スクロールをするWebサイトが一般的でしょうが、縦型のサイトで横スクロールバーがでると、コンテンツを閲覧する際に横にスクロールさせないといけません。
縦はマウスホイールで対応できますが、横方向へのスクロールには大半のマウスが対応できないので、沸点が低い僕なんかはその時点でサイトを見るのをやめてしまったり、怒りで失禁したりします。
Javascriptでマウスホイールを横の座標にしてしまえばいいのですが、今度は縦にスクロールできなくなってしまうので意図的に横スクロールさせるサイトを制作する時以外はオススメできません。
今回は縦にスクロールする至って普通のWebサイトのサイズの幅を決めます。
まずはユーザーのディスプレイサイズを調べて見ましょう！
StatCounter Global Statsという色んなシェア率が解る便利なサイトがあります！
グラフの左下あたりにstat:Browser・・・というのがありますので、そこをクリック！
PlatformのDesktop以外のチェックを外したあと、StatisticをScreen Resolutionにし、右側のチェックをBarにすると下記のような画像がでてくるかと思います。
こんなかんじで、現在ユーザーのPCモニタの横幅は1000px以上が大半を占めているようです。
ipadも横向きにすると1024pxありますのでそれも踏まえて、最小モニターサイズの想定は1024pxとして考えましょう。
僕の意見だけでは、納得のいかないかたは大手企業を参考にしてみよう！その辺を想定しているのか大手企業も950~1000pxの横幅が多いですよ！どや？
- Yahoo!JAPAN、シャープ、全日空、ヤマト運輸、ぐるなび 950px
- スターバックス、ユニクロ、任天堂、集英社、電通 960px
- クックパッド、楽天市場、goo、セブンイレブン、JTB 970px
- Apple、Facebook、食べログ、au、内閣府 980px
- ソフトバンク、GREE、DeNA、ホンダ、NHK 990px
- マクドナルド、ソニー、博報堂、講談社、bing 1000px
なかでも960pxというサイズのWebサイトは非常に多くのサイトで採用されています。
明確な理由はわかりませんが、僕が感じる限り割り易い数字なので使い勝手が非常に良いということです。
- 960/2=480
- 960/3=320
- 960/4=240
- 960/5=192
このようにある程度の数字で割れることができます。
おいおい、お前川さん、それだけかよ！と思われるかもしれませんが、実際に制作してみると横幅を目一杯使って３列で均等なサイズのオブジェクトを配置したり、４列で均等なサイズのオブジェクトを配置しても数字が余らないのは奇麗に整列されて見た目も良いんじゃよ。
２列、３列、４列、５列、６列、８列、１０列と対応できるので「うちの猫が1000pxにすると凄く喜ぶ」とかだと、そっちを優先させたほうがいいでしょう！だけど大抵喜ばないので、特別な理由がない限りは960pxで作るといいと思います！
レスポンシブデザインの場合はブレイクポイントもこの段階で決れるといいです！
レスポンシブが良くわからない人はこのサイトのウィンドウの幅を変えてみたら大体わかるかとおもいます。
ワイヤーフレームに肉付けをする
まずはワイヤーフレームを用意しましょう。
僕はパン屋が好きなのでパン屋さんのサイトをワイヤーフレームで作ってみました！
ここからの作業はデザインカンプ完成後の行程、HTML+CSSでのコーディングを意識して作るとコーディングの時に気持ちが楽です！
ではPhotoshopを立ち上げ、ファイル→新規作成→プリセットをWebにし幅960px、高さは足りなかったらあとで継ぎ足していくので好きな数値でいいと思います。
解像度が72pixel/inch、カラーモードがRGBカラー8bitであることを確認し「OK」をおしてファイルを作成！
高さが足りなくなったら、切り抜きツールで領域を下へ広げるか「Photoshopメニュー」→「イメージ」の「カンバスサイズ」で高さの単位をあげてください。
では主な要素に合わせてガイドを引いていきます。
ガイドは「メニュー」の「表示」→「新規ガイド」から引けます！
何回もやってるとこれも面倒臭くなってくるので、そんな人は「メニュー」の「表示」→「定規」を選択してください。
上と左に定規が出てきますので、そこでクリックしてガイドを置きたい場所までクリックするとガイドが引けます。
ガイドをある程度引き終わったらワイヤーフレームを元に要素をシェイプツールで作っていきます。
着色はこの段階では適当な色でやって、ロゴがある人はロゴ、あとはサンプル画像も配置します。元のワイヤーフレームと見比べてみましょう。
ここまでで大体こんな感じになっています。まだまだ先は長い・・・やれやれだぜ。
フォントを選ぶ
Webサイトでフォントを扱うときには気をつけたいことがあります。
まずWebフォントという存在をデザインする際には知っておいて頂きたい！
Webフォント
CSSでフォントを指定しているとブラウザは端末（pcやiphone、ipadなど）にインストールされているフォントを呼び出して表示するんですが、端末にフォントがない場合、意図しないフォントが表示され、CSSでのフォントの指定は端末に標準で入っているものを使用せざる得ませんでした。
そこで使用したいフォントで書いたテキストを画像にして表示させていたのですが、文章を修正する度にかかる手間や検索に引っかからないという問題があったんです。
それらを解決すべくWebサーバー上にフォントを置いて、意図するフォントを表示できるようにしたものがWebフォントです。
Webフォント素晴らしい！となるはずなんですが、英語フォントと比較して日本語はひらがな、カタカナ、特に漢字が膨大で、Webフォントのデータが重くなってますので現状そんなに使われてないです・・・。
Webのフォント事情から大体下記のような感じになるかと思います。
- 英語はWebフォントを使えるので特に制約なし。
- ロゴ、ナビゲーションメニューなどの修正がほぼない日本語テキストは画像で表示する。
- 編集や検索に関わるような文字は端末に標準で入っているフォントを使う。（WindowsはMSゴシック・明朝、游ゴシック・明朝、メイリオなど。Macはヒラギノ角ゴ・丸ゴ・明朝、游ゴシック・明朝、Osakaなど。）
このルールに従って先ほどまで作成していたデザインに合ったフォントを選ぶといいと思います！
様々なフォントを同じサイト内で使うと統一感もなくなってくるので、まとめれる自信のないかたは大体3つくらいに抑えると統一感がでます。
ちなみにWebフォントはGoogleから提供されているものがありますので、使われる方はHTML+CSSでのコーディングの際に利用してみてはいかがでしょうか？
テキスト画像
テキストを画像で表示しようとしている部分は、気軽に文字間隔とかを調整できるので、折角ならより奇麗に見せるためにそれもやってしまいましょう。
普通に入力した文字のままだと、文字と文字の間がほかの文字より広かったり、狭かったりして奇麗に見えないときがあります。
そういう時はカーニング、トラッキング（字送り）というものをおこないましょう！
解り辛いかもしれませんが、調整したものを見て頂けると調整したものは字間が大体均等になっていると思います。
そもそもカーニング、トラッキングとはなにかというと、カーニングは文字と文字のスペースを調整するもので、トラッキングはまとまったテキストに対して等間隔のスペースを設定するためのものです。
ですがトラッキングは欧文フォントにたいして作られています。
日本語は文字と文字のスペースが開きすぎるとあんまり奇麗にみえません！日本語でもトラッキングは効くんですが、どちらかというと字詰めを使うほうが多いです。
調整はPhotoshopの文字から行います。
これが画面にない人は「Photoshopメニュー」の「ウィンドウ」→「文字」を選択すると出てくきますよ！左がカーニングの設定で右がトラッキングの設定です。
カーニングにはメトリクス、オプティカルの自動調整する方法と数値入力で手動で調整できるものがあります。
実際に試してみます。
メトリクスは「ke」などの特定の文字を組み合わせた場合、フォントにその組み合わせのスペースに関する情報が含まれていればそこだけ調整してくれます！
オプティカルは隣の文字の形に応じ、全体的に文字を詰めてバランスよく調整されているのがわかります。
僕はメトリクスやオプティカルを実行して、それでも変な箇所は文字と文字の間にカーソルを持っていって数値を弄ってバランス調整をしています。
Photoshopでのショートカットは「alt」+「←」or「→」です。
カーニングをゲーム感覚で練習できるサイトがあるので、不慣れな人はこれで練習してみると自信がつくかも！結構楽しいです！
次はトラッキングと字詰めです。トラッキングと字詰めは非常に解り易いと思います。
トラッキングは行全体をドラッグで選択し「alt」+「←」or「→」でも調整できます。
試しにトラッキングを100、字詰めを70%にしてみます。
トラッキングは文字と文字のスペースが開いたのが解ります。マイナスの数値をいれるとスペースは狭まります。
字詰めは文字通り字が詰まっていますね！数値が高いほどスペースがなくなります。
マイナスの数値がないのでスペースを開けたい場合はトラッキングで対応しましょう。
これで画像にするテキストも奇麗になったんではないでしょうか。
今回は以上となります！
記事を書いた人
コメントする