Lopan.jp

Webサイトの作り方のまとめ!デザイン制作からコーディング手前まで。

Webサイトの作り方

サンプルサイトの制作を通して、「Webサイトの制作手順」についてまとめてみました。
Webサイト制作の前にする事」、「トップページデザインについて」、「Photoshopを使った画面の作り方」、「Photoshop豆知識」、「デザインをWebサイト用の画像データにする時のポイント」など、主にPhotoshopで使えるテクニックが多めです。
Webサイト制作にお役立ていただけたら嬉しいです!

目次です。クリックするとその項目へ移動します。

制作の前に

話し合い

Webサイトの制作に向けて、まず最初にする事は、依頼主についての情報を収集することです。依頼主と話し合い、どんなサイトにしたいのか、方向性を決めてゆきます。
依頼主との話し合いでは、以下の2点について、しっかりと決めておく事が大切です。

  • サイトにどんな情報を入れるか、どんな人に向けて発信するか、サイトをどう活用していきたいかなど、サイトを立ち上げる目的は何かを確かめる。
  • どんな雰囲気のサイトにしたいか、理想とするサイトや、希望・要望を聞きながら、どういうデザインにするかイメージを固める。

また、同業他社のサイトを片っ端から見まくる事。今回の場合、喫茶店やパン屋さん、ケーキ屋さんなんかが参考になるかもですね。他のサイトではどんなコンテンツがあるか、どんな見せ方をしてるかとか、この業種だとどんな色遣いのサイトが多いのかとか、たくさんみる事で、刺激になったり、イメージが掴めたりします。僕もこのサンプルサイトを制作するにあたっていろいろ見て回りました。

とはいえ今回はサンプルサイトという事で、すべて妄想で進めてゆきます。

依頼主についての情報をまとめる

サンプルとして制作するサイトは、「とあるカフェのWebサイト」です。
まずは依頼主である「Lopan cafe」についての詳細情報を整理していきたいと思います。

お店の情報

  • 店名:カフェ&ベーカリー「Lopan cafe」(略してパンカフェ)
  • 事業内容:手作りパンの販売、カフェとして店内での飲食
  • 店舗:閑静な住宅街の一角にひっそりと佇む欧風な建物
  • 店内:木のぬくもりに包まれた、おしゃれで落ち着いた、アンティークな雰囲気
  • コンセプト:手作りパンの香りがほっこりやさしい気持ちにしてくれる、あなたの街のパンカフェです。おいしいパンとあったかカフェで、心やすらぐ特別なひとときをご提供いたします。

店内イメージ

サイトの役割

  • 手作りパンの紹介
  • オススメパン・新作パンの紹介
  • カフェメニューの紹介
  • Lopan cafeからのお知らせ・キャンペーンなどの告知
  • お客さまからのお問い合わせの受付
  • パン教室のご案内
  • 珈琲の美味しい淹れ方や、パンについての豆知識などのコラム

以下、Lopan店長談。

「新作パンなんかも毎月投入しているから、手作りパンの紹介ページは、特に見て欲しいな。人気のパンはすぐ売り切れちゃうから、時間帯によっては欲しいパンが買えない時があるんだ。お客さんが欲しいパンを、サイトから予約できるようしておくといいかもね。珈琲の淹れ方やパンの豆知識は、博識な僕がブログで書くよ。あと、TwitterとFacebookも設置したいな。」

必要なページを書き出してみる

Webサイトは、紹介したい内容をページで分けて、各ページをリンクで繫ぐことで、ひとつのサイトになります。ページ+リンク=サイトです:)。
「Lopan cafe」では、以下のページに分けることにしました。

  • Lopanのパンの紹介
  • cafeメニューの紹介
  • Lopan店長のパンカフェブログ
  • パンの予約フォーム
  • お問い合わせフォーム
  • プライバシーポリシー
  • サイトマップ

トップページに表示させる内容を決める

トップページはユーザーが最初に訪れる肝心な場所です。
第一印象は、ユーザーに固定観念を与えてしまいます。そういう意味でデザインの見栄えはとっても大事です。また、リンクの位置が分かりづらいとか、知りたい情報が見つからないなど、使い勝手が悪いと、ユーザーに嫌な印象を与えてしまいます。その所為で「Lopan cafe」の印象も悪くなってしまっては、元も子もないですもんね…X(。
逆に言えば、ここでしっかりとユーザーをナビゲートすることができれば、新作パンやおすすめパン、パン教室や、店長の豆知識などが共有でき、みんな大ハッピーということです:)。
「Lopan cafe」のトップページに載せる内容を書き出してみます。

  • 各ページへのリンクボタン
  • お問い合わせ電話番号
  • おすすめパンの紹介
  • Lopan cafeからのお知らせ・キャンペーンなどの告知
  • パン教室の日程連絡
  • Twitterのタイムライン
  • FacebookのLike Box

目次に戻る

デザイン制作

上記で決めた内容を元に、デザインに起こしていきます。

まずはラフスケッチしてみる

トップページのデザインを考えていきます。ただ「載せるだけ」ではいけません。使い勝手を良くしないと。ここでは以下のことに気をつけながら、トップページに載せる内容の位置や大きさをラフスケッチしてみました。

  • 各ページへのリンクボタンは、ユーザーに向けて、ナビゲーション的な役割を持たせると使い勝手が良くなります。なので全ページ共通のものを、見やすい位置に配置して、今見ているページのボタンの色を変えたりしながら、しっかりナビできるようにします。
  • お問い合わせ電話番号は、探さないと見つからないようでは不便です。もし、サイトで探したい情報が見つからなかった場合には、電話でご連絡いただけるように、電話番号はすぐに見つけられる位置に置いておきたいです。
  • 新作パンや当店おすすめのパンは目立たせて紹介したいです。新作はいち早くお客さんに知って欲しいですし、お客さんも待っているはずですから。
  • Lopan cafeではランチタイムサービスや、特定の日にキャンペーンを行なったりしているので、その告知が結構、集客に一役買ったりしそうです。のでおすすめパン同様、よく目につく位置に配置したいです。
  • パン教室の日程は、教室へ参加する人向けの情報なので、それほど目立つ位置に置かなきゃってことはなさそう。
  • Twitterのタイムラインは、Lopan店長のリアルタイムなつぶやきなので、「Lopan cafe」に関わる新鮮なニュースを配信できそうです。サイトに訪れた時にすぐに見えていた方が良いかも。
  • FacebookのLike Boxはいわば「にぎやかし」かなと思います。「Lopan cafe」のファン数やサイトの活気の指標となるので、ページの下の方にでんと置くと良いかも。

以上のことを踏まえて配置を決めていきます。

トップページのラフスケッチ

「ここにロゴ入れてー、ここがナビでー、ここがお知らせを載せる所で〜…」と、とりあえず「場所取り」をする感じですすめます。ただし、この段階ではまだ決定してはいけません。違う配置のものも何パターンか考えておくと良いです。
「新作パンや当店おすすめパンの目立たせ方」、「ランチタイムサービスやキャンペーン情報の告知の仕方」、「パン教室の日程の表示方法」、「背景の色や質感」など、情報の見せ方やレイアウトのバリエーションも、この時に思いつくだけメモしておきます。

ラフスケッチをPhotoshopで清書する

新規

ラフスケッチを元に、Photoshopで、実際のサイトのサイズに合わせて清書していきます。実際のサイトのサイズを横幅1000pxと決めて、いざ清書です。
この段階で、ボタンやナビゲーションなどのテキストも、フォントやサイズなどを決めて配置していきます。実際に使用する画像やイラストがある場合は、それらも配置します。

この時、ラフスケッチの段階で「こうなるだろう」と思っていた所が、実際にデジタルにすると、サイズが合わなかったり、バランスがおかしかったり、結構印象が変わってしまうんですが…、ここで!ラフスケッチの段階で何パターンか考えておいたものが役に立ちます。
意外にスペースが余ってしまったり、バランスが悪くなってしまった時は、違うパターンのものから、取っ替え引っ替えしながらバランスを整えていきます。
背景や色などのイメージがすでに固まっている部分は、仮に入れてみたりしながら「全体感」を調整していきます。

これで大体のレイアウトが組み上がりました。最終的にこの通りになるとは限りませんが、とりあえずこのまま進めます!

トップページのレイアウト

目次に戻る

配色・素材を置いてみる

清書の段階で置いた仮素材を、本番用の素材にしていきます。色調整をしたり、より良い部分をトリミングしたりします。
またこの段階で、背景画像など、上下左右で繋がる繰り返し画像は、パターンにしておくと後が楽です。背景画像のパターン化については下の「寄り道 豆知識 その2」を参照のこと。
素材を置いてみたら、その大体のイメージから、サイトのイメージカラー、一番多く使うベースになる色二番めに多く使う色目立たせたい所に使う特別な色の3色を決めていきます。
一番多く使うベースになる色は布地の「赤みのベージュ」を、二番目に多く使う色は木目調の「焦げ茶色」をそのまま使う事にします。目立たせたい所に使う特別な色としては、温かいイメージの「橙色」に決めました。あと、ベースがベージュだけだと素っ気ない感じがしたので、差し色として「黄色」もプラスしてみました:)。

配色と素材を配置したトップページ

目次に戻る

テキストやボタンに装飾を加える

今のままでは、味気ないですね。タイトルやボタン、本文、キャプションなども区別がなく見づらくなっています。タイトルは各項目の「見出し」として大きく目立たせたり、ボタンは太い枠線で囲って他と差別化するなど、一定のルールを決めて装飾していきます。それぞれの役割に合わせて、装飾の仕方でメリハリをつけるのがポイントです。
さて、そんなこんなで、微調整したらデザイン完成ですね!

完成したトップページデザイン

目次に戻る

Web用の画像素材にする

完成したデザインをHTMLで使えるデータにする為に、デザインをパーツごとに切り分けて、Webに最適化させる必要があるのですが、それには、Web およびデバイス用に保存…という方法で書き出せます。

ひとつのサイトで使われる画像素材は、サイトによってはものすごい数になる事がありますが、そんなたっくさんの画像素材を、いっぺんに書き出すには、スライス機能というのを使います。スライス機能では、画像を一画面内で、パーツごとに切り分け、各パーツにWebで使う時用の「ファイル名」や「ファイル形式」を割り当てる事ができ、それをWeb およびデバイス用に保存…からいっぺんに書き出すことができます。

僕はいつも、制作したデザインデータとは別に、スライス用のデータを新たに作ります。
例えば、デザインデータのファイル名が「design_top.psd」だったら、スライス用の「slice_top.psd」を作ります。でそこに、トップページで使う素材パーツを、スライスしやすく並べ直したりします。
これをする事で、「どうコーディングするか」などを考える事ができるので、コーディングに入る前の心の下準備を整える事にもなります。
また、汎用画像をまとめて「slice_common.psd」にしたり、背景画像をまとめて「slice_bg.psd」にするなど、画像をカテゴリー毎にファイルを分けておくと、管理しやすいと思います。

スライス用のデータを作る

下図は、Lopan cafeのトップページのスライス用データです。スライスするには、スライスツールを使って、パーツを四角く切り分けます。
切り分けたスライス上でダブルクリックすると、Webで使う時用の「名前」や「URL」、「Target」などなど設定できますが、僕は名前しか設定してません(名前に使える文字は、小文字英数字、ハイフン、アンダースコアです)

スライス用データ

いかに綺麗に並べるかもこだわりポイントです。汎用画像から順に配置してゆき、のちのち増えそうなボタンやタイトルテキストは、下部に余裕を持たせて配置してます。
ロゴの横にある、スライスされていないベージュの四角は、この後、スライスした画像を書き出す際に利用します。乞うご期待です。

Web およびデバイス用に保存

Web およびデバイス用に保存

スライスが終わったら、いよいよ画像データの書き出しです。メニューバーの「ファイル」からWeb およびデバイス用に保存…を選択して、スライスした画像の書き出しを行います。
すると、下図のような画面が現れます。ここで各パーツに合わせた、保存ファイル形式などを指定します。

Web およびデバイス用に保存画面

Web およびデバイス用に保存手順

保存時の設定など

  1. まずは、ファイル形式の厳選です。「色数がはっきりしている画像はGIFPMG-8というファイル形式が向いている」とか、「色数が計り知れない画像はJPGPNG-24というファイル形式が向いている」という情報を元に選別してゆきます。

  2. ここで、先ほど乞うご期待した、ベージュの四角の出番です。この色をスポイトツールで拾って、透過GIF形式のマット色の指定に利用します。
    背景が白以外の時は、マットにその近似色を指定する事で、画像と背景との境界を滑らかに見せる事ができます。

  3. すべてのパーツの、ファイル形式の設定を終えたら「保存」をクリック。すると、どこに保存するかの画面が表示されます。
    「設定」からその他…を選択しカスタム設定します。といっても、僕が変えるのは「ファイル名の互換性」と「最適化ファイル」のチェックを外すだけで、その他はPhotoshopをインストールした時のまんまです。

  4. 「スライス」のすべてのユーザー定義スライスとは、webで使う用の名前を付けたスライスのみを書き出す指定です。最初の一回めは、この指定で書き出すのが楽で良いです。
    そして、とどめの「保存」です!

以上!そしてコーディング作業へと入ってゆくわけですが、その話はまた今度。

目次に戻る

あとがき

最後まで読んでいただき、ありがとうございます!
時間をかけて書いただけあって、より踏み込んだ内容の濃い記事になったと思います:)。ほとんどは僕が個人的にやってる、あんまり応用力のない内容になっちゃってますが…xx。
とはいえ、サイトをひとつ作るとなると、この記事の内容以外にも、もっともっとたっくさんの工程が必要とされるんですよね。改めて大変な作業だなぁと感じました。

ここで紹介したのは、僕の個人的なやり方ですが、たぶん世の中にはもっと賢く、効率的な制作手順や、テクニックがあるはずです。
「こうすればもっと綺麗に作れるよ」とか「これはこうした方が良いよ」というのがありましたら、教えて下さい!

続きはこちら→「Webサイトの作り方のまとめ!番外。コーディングには入れてないですが…

  • このエントリーをはてなブックマークに追加

Comment & Pingback

17 Comments! for Webサイトの作り方のまとめ!デザイン制作からコーディング手前まで。

  1. Pingback: Photoshopを使いこなしてWebデザインにも挑戦してみよう | IT系就活のための新卒採用求人ならエンジニア就活

  2. Pingback: サイトリニューアル手順をまとめ。各工程とその時に参考にしたいサイトご紹介!

  3. みどり

    とても参考になりました! 右も左もわからず、ほんと迷子状態だったのですがこのサイトに出会えてよかったです! パーツを作成する段階から書かれているので、迷う事なくついていくことができました。他の記事もこれから参考にさせていただきます!

    Reply

    • _watercolor

      > みどりさん
      コメントありがとうございます!
      お役に立てていただけて嬉しいです!
      今後ともよろしくですーX)!

      Reply

  4. よねぢ

    DTPからWEBにやることが変わって、4ヶ月目の初心者です。
    いろいろなサイトを参考にさせていただいてるのですが、このサイトはとても参考になります。
    特に、サイト作成までの考えかたや進め方がわかりやすくてありがたいです。
    あと、自分Photoshopがそこまで得意ではないので、図が多くてわかりやすい解説がとても助かっています。
    (実は、最初Photoshopのツールの使い方を調べていて、ここに辿り着きました…w)
    ランディングページの作成なんかも紹介してもらえたら、もっと嬉しいです。

    Reply

    • _watercolor

      > よねぢさん、はじめまして。
      とっても励みになるコメント、ありがとうございます!

      ランディングページを制作されてる方って多いんですね:o!
      まだあんまり、ランディングページのことよく分かってないんですけど…X(
      商品を魅力的に紹介するには、その商品のことをよく理解してないといけないし、
      ユーザーがその商品について何を知りたいか共感できてないと難しいですよね…。
      分かりやすく紹介する構成力と、世界観をつくり込める表現力が大事、なのかな…。
      うーんすみません…X(。

      Reply

  5. としのぶ

    初めまして。こちらの記事とても参考になります♪私は仕事でランディングページを製作する事が多いのですが悪戦苦闘しております。是非、ランディングページ製作についても記事にしていただければ嬉しいです。今後とも楽しみにしております。

    Reply

    • _watercolor

      > としのぶさん
      はじめまして。コメントありがとうございますー。
      参考にしていただけてうれしいです:)!
      ランディングページ難しいですよね。独特の見せ方だったりノウハウがあるので…X)。
      いつか記事にできるように勉強してみますっ!
      今後ともおたのしみにぃ!

      Reply

  6. Pingback: WEB制作 | SAY HELLO

  7. poncha

    プログラミング専門でしたが、必要に迫られデザインをすることになりました。
    非常にわかりやすく、参考になりました。
    ありがとうございます。

    Reply

    • _watercolor

      > ponchaさん
      こちらこそ、読んでいただいてありがとうございますX)!
      少しでもお役に立てたのなら幸いです。

      Reply

  8. やま

    Webデザイン初心者です。わかりやすい記事で、大変勉強になります!Photosohpでの作業状況が同時に確認できるので迷うことなく作業できました!コーディングの記事が本当に待ち遠しいです!

    Reply

    • _watercolor

      > やまさん
      うう(泣)、そういう言葉がなにより嬉しいんです。
      がんばって続き書きますね。お楽しみにいX)!

      Reply

  9. Pingback: Photoshopを使いこなしてWebデザインにも挑戦してみよう | IT系の文系・理系学生向け有給インターン・アルバイト募集なら「エンジニアインターン」

  10. Pingback: 11月なので今年も自分の好きなブログを告白します(ver.2012) | クリエイティブメモメモ

  11. ゆう

    Google Mapsカスタマイズでたどり着いたのですが、この記事もとても参考になりました。コーディングについての記事、楽しみにしています。

    Reply

    • _watercolor

      まじか!嬉しいです!ありがとうございます!
      お楽しみに!

      Reply

コメントを残す

*がついている欄は必須項目です。