ポロロンデザイン事務所

デザインでアクセスアップしたい4

4. 参考に手順をお伝えします。デザイン・文章・htmlコーディング編

デザイン

新しいHP
リニューアル公開したポロロンデザイン事務所のWebサイト

こちらも詳しい設定内容は内緒としますが、参考に手順をお知らせいたします。

色合いを検討する。

「想定するお客様」へデザインの質が伝わる色を設定しました。

デザインタイプを検討する。

おしゃれであっても、あくまで企業向けだけど分かるものにしました。あとは「想定するお客様」に合わせてデザインしました。デザイン事務所だからと言って奇をてらったり、芸術的にして自己満足な物はよろしくありません。

画面レイアウトを検討する。

開業してまだ3年で、存在自体もまだまだ知られていないので、「ポロロンデザイン事務所」での検索よりも「デザイン事務所」「Webサイト」「パンレット」「ロゴ」などで検索してきていただいた際わかりやすいように、TOPPAGEは「何が出来るのか」を見せるため事業カテゴリボタンを大きく用意しました。あとは、無駄な情報は省き、必要なものがすぐに分かるようにしています。ボタンの順序や配置も優先順位を考えて並べます。流れるように順番で見ても違和感がなく、しかも「問い合わせたいな」となるように配置しました。
※SEO対策のためにTOPPAGEにやたらと文字を多くしているサイトがありますが、実際使うのは検索エンジンロボットではなく人間ですので、「人に優しく」を念頭にいらないものは思い切って捨てましょう。

ページ遷移を検討する。

ページ遷移についてはポロロンデザイン事務所独自のノウハウがあります。お打ち合せの際におたずねください。結構「え、これだけでいいの？」というような技術でも閲覧の行動が大きく変わってきます。

 

文章・htmlコーディング

リニューアル前のWebサイトの文章は「こちらからの思い」を主に書いていましたが、今回は「想定するお客様」のお悩みに対する回答、デザイン事務所を選ぶときに知りたいこと、ポロロンデザイン事務所の特長を分かりやすく短くまとめています。全体を通して文章のテイストが変わらないように一人が編集します。

htmlコーディングについてですが、今回PC版のリニューアルなので、企業向けサイトはコンシューマー向けとは違い保守的にコーディングします。というのも一般的な企業では、2012年12月時点でもIE6系のブラウザの利用がまだ少しあるからです。そういった方にもご覧頂けるようにしつつ、FACEBOOKの「いいね」ボタンなどソーシャル系のサービスボタンを追加しています（ぜひ「いいね」をクリックしてください）。

最近（2012/12現在）では、レスポンシブデザイン（※）やスクロールの動きに合わせてアニメーションの様な動きのあるパララックスサイトなどが流行っていますが、今回の当事務所の想定からすると対応の時期ではないと判断しました。そういった対応も各企業のサービスやお客様層によりかわってきます。
＜※2015/4/20にレスポンシブデザインのサイトにリニューアルしています。＞