140107：Webサービスの制作フロー

デザインコンセプトは明確にするデザインコンセプトの例・当社のブランド、名前、ロゴを覚えてもらいたい。・消費者に安全で安心な商品を提供している、信頼できる企業だと思われたい。・たくさんの消費者のみなさんにこうに購入してもらっている、人気の商品だということを伝えたい。・どこよりも新鮮でお買い得な商品を取り扱ってる店舗だと思われたい。

Webサイトは必ずしもトップページから訪問するとは限らない、ということを意識してサイト設計をする。Webサイトはユーザーが迷子になりやすい。サイト内を移動するためにも、使いやすいナビゲーションはとっても大切。サイトの構造をユーザーにとって分かりやすい構造にする。

ユーザーがサイトに訪れる目的を、ユーザーの身になって考えれば、どんな風にコンテンツを整理してあげれば分かりやすいかが、自然と分かってくる。

作成ポリシーの例・ターゲットブラウザは？・クロスブラウザにする？それともプログレッシブ・エンハンスメント？・スマートフォン対応は？

プログレッシブ・エンハンスメント Google Chrome などのモダンブラウザでは、よりリッチな表現を楽しんでもらって、IEなど未対応ブラウザでは、最低限必要な環境確保するという考え方。

ワイヤーフレームワイヤーフレーム＝設計図デザイナーがワイヤーフレームという場合、ページのレイアウトを作る下書きみたいなものも指す場合もある。初期段階のワイヤーフレームは、サイトの構造を示すサイトマップに近い。もちろんこれを作るのに、前半で見てきた目的やターゲットについて考えたことを反映させなくてはいけない。

コンテンツは同じでも、情報のグルーピング化、優先順位の付け方で、サイトの構造は変わる。

設計図に必要なことを書き加えていく。例えば・導線の設計・必要となる機能・ページごとのSEOキーワード・などなど

基本的に全部のページに書き込む。お問合せフォームを付けるなら、フォームには何が必要（お名前、メールアドレス、メッセージなどの項目）など。

ラフデザインをつくる。ラフデザインは色を付けたり、サンプルの写真を貼ったりして、Webサイトらしく見えるデザイン。

完成したWebサイトと、ワイヤーフレームを見比べる事ができるサイト。 Wireframe Showcase http://www.wireframeshowcase.com/

Webフォント Webフォントを使えば、好きなフォントを使ってテキストを表示できる。

HTML+CSSでのコーディング画面 Coda、dreamweaver、sublime

Webデザイナー（私）によるWeb制作のときに気をつけてることや制作フローとかいろいろ http://webdesignrecipes.com/web-development-flow/

メモ 7日間でできるCSSベースのホームページの作り方 http://www.coolwebwindow.com/hp-navi/0th-day/