酔いどれエンジニアのブログ

有限会社wisdomのスタッフブログです。主にプログラミングやアプリケーション開発の話題を書いていきます。

Webサイトをリニューアルにするに辺りやったこと

というわけで数年振りのブログです。 ようやく弊社のサイトをリニューアルしました。 その際にやったことや手順を自分のための備忘録として書き残しておこうと思います。 それが何かのお役に立てれば幸いです。

やったこと

情報アーキテクチャ

情報アーキテクチャとは何ぞやというのは、未だ自分の中でもやっとしているのですが、次のようなことを行いました。

  • 何の情報を持っていて、それらはどういう構造なのかを整理。
  • その上でサイトの目的に応じて、どの情報を主として伝えるか優先順位を決定。

ワイヤーフレームの作成

情報をどういう構図で見せるかを決定するために、ワイヤーフレームを作成しました。 その際に使用したのはmoqupsです。 他にも色々とサービスはあったのですが、グリッドデザインが出来るのでこれにしました。

大枠の配置の決定

まずサイト全体の大枠を決めました。 グローバルナビゲーションをどこにおいて、ローカルナビゲーションをどこに置くのか。メインコンテツはどの位置に表示させるのかなどを決めていきます。

キャッチコピーの作成

次にサイトのキャッチコピーを決めました。 類似サイトなどを見てみたり、テンプレートに当てはめてみたりしましたが、最終的にはITで出来ることの意味を深く考えていき、その結果でてきた言葉を聞き覚えしやすく表現しました。 普段、こういう事はやっていないので、脳の違う部分を使ってく感じが良いですね。 若返りそうです。

文言の作成

そして共通部分の配置を決め、1ページごとのワイヤーフレームを作って行くわけですが、 その時に重要視したのが、実際に載せる文言を決めるということ。 字数によってデザインに影響して来ますし、なにより伝わる言葉をここで練っておかないと、見た目で誤魔化してしまいがちなので本腰を入れました。 ここまではスムーズに来てたのですが、慣れていないため全く進まず、何度投げ出そうと思ったことでしょうか。 この時に「文を書かねば。そうだブログを書こう。」と思い、今に至ります。

デザイン

そしていよいよデザインに掛かるわけですが、いきなりHTMLを書かずにちゃんとデザインを決定してから、コーディングをしようと決めていました。 というのも、デザインが固まらずコーディングを初めてしまうと、右往左往してコードはぐちゃぐちゃになるし、手間も結局余計に掛かってしまうからです。 この辺り、アプリケーション開発と同じですね。

デザインにはKeynoteを使用しました。 もともと持っていたもので、デザインできそうなものがこれだったので。 作る時には、ワイヤーフレームにもとづき、下の階層から順に重ねて作っていきました。 これもワイヤーフレームもそうなんですが、全てのページを作るのではなく代表的なページだけにしました。 全部作っていたら、私の場合は心が折れてしまいます。

コーディング

Middleman

最後に実際にコーディングを行っていきます。 今回はMiddlemanを使いコーディングを行いました。

スタイルシートでは、SassやScssも使えますし、Compassも利用可能。 HTMLでは、SlimやHamlを使用できます。 何よりLiveReloadがいいですね。コーディング中に保存したら自動でブラウザをリロードしてくれるので、手を止めずにコーディングできます。 小さい機能ですが、凄く重要な機能です。

この辺りの詳しい使い方なんかは、別途まとめたいと思います。

PlaceIt

それっぽい画像に関してはPlaceItを使用し作成しました。なんて素晴らしいツールなんでしょう。

smarty

問い合わせページですが、フリーのものをとも思ったのですが、デザインをカスタマイズしたりという手間を考えると結局自分で作った方が早いのではないかとの考えに至り、Smartyを使用して自作しました。 CSRF対策やXSS対策もしてあります。

またこの辺りの事に関しても別の記事に書きたいと思います。

最後に

最後に全般的に役立ったものの紹介を。

NUboardという、ノートのように使えるホワイトボードなんですが、頭の中のものを直接デジタルに落とすのって、私にとっては難しいので、一旦アナログに落とすのですが、紙だとどこに行ったか分からなくなったりしてしまいます。 ホワイトボードだと消すことが前提ですので、不思議と書き終わったらちゃんと写真に撮るんですよね。

他にも色々と書きたいことがあったのですが、それなりな分量になって来たのと、少々疲れてきてしまったのでここまでとさせて頂きます。

それでは、また。