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

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

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

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

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

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

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

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

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

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

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

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

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

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

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


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

140106:登録フォーム作成

Webサービス運営で覚えておきたい、登録フォーム作成の7つのポイント http://design.kayac.com/topics/2012/11/form7tips.php

  1. これだけは欠かせない基本の要素6つ ・ラベル ・入力フィールド ・ボタン、リンク ・ヘルプ ・メッセージ ・バリデーション

  2. 登録と無関係の要素はなるべく表示しないように!

  3. 聞きたいことは最小限にして不安にさせない

  4. OpenIDを利用して登録手続きを超簡単に!

  5. バリデーションは色や動きでみせると効果的

  6. 登録のメリットを表示しましょう

  7. アドバイスに縛られないで、そのサイトの個性に適した手法を使いましょう!

会員登録フォームを構築するポイント http://www.web-20.net/2008/08/post_81.html

信頼性・安心感を与えるポイント ・いきなり登録させない ・必ず利用する項目以外は必須にしない ・非公開項目には非公開と出す ・暗号化通信(SSL)のページにはその旨を明示する ・プライバシーポリシー(個人情報への扱い)は上部に明示する

ミスを減らすポイント ・メールアドレスを2度確認した方がミスが減る ・ログインIDはメールアドレスで ・登録ボタンは大きくする ・クリアボタンとかいらない!

ユーザビリティー向上 ・初期入力1にフォーカスさせる ・ラジオボタンやチェックボックスにはfieldset、label要素をつける ・ラジオボタンは初期状態で選択しないほうがいい ・サイト独自の用語などはその場でヘルプを表示する ・生年月日の年はセレクトボックスでなく、テキストで ・生年月日のセレクトボックスを主要ユーザー層に合わせる ・会員フローにナビゲーションバーを表示する ・「その他」->自由入力のベスト解 ・長文入力欄には残り文字数表示


メモ ログイン画面の離脱率を下げる!ECサイト各社の工夫 http://design.kayac.com/topics/2010/11/loginpage.php

ライフネット生命見積フォーム http://www.lifenet-seimei.co.jp/plan/index.html

Lancers会員登録 https://www.lancers.jp/user/sign_up

140104:ガントチャートスケジュール管理、ワイヤー

今日も引き続きスケジュールとワイヤーフレームをつくっていきます。

メモ rails-style-guide https://github.com/bbatsov/rails-style-guide

rails-style-guide(日本語訳) http://bitarts.jp/blog/archives/004140.html

140103:仕事初め、ワイヤーフレーム

2014年明けましておめでとうございます。

今日は今月以降のスケジュールの調整・いままで紙で書いていたワイヤーフレームPhotoshopでつくります。

ワイヤーはトップページが半分くらい完成。

140102:英語のタイピング

英語のタイピング速度はプログラミングの速さにある程度影響するなということを感じていて、時間のある時に英語のタイピング速度を上げておきたいなと思っていた。

実家にいて暇になったので、今日英語タイピングをしてみた。 いくつか使った後このサイトを見つけた。 http://play.typeracer.com/

このサイトはある程度まとまった文章で英語タイピングの練習が出来て、wpmが毎回でるので、実用的でおすすめ。

最初はwpm30代しかでなかったが、やっているうちに50近くでるようになってきた。

http://answers.yahoo.com/question/index?qid=1006040110835 http://www.learn2type.com/typingtest/typingspeed.cfm 平均は40くらいらしいから、60くらいを目指してあげる