【Web制作の現場】小畑式マークアップ術：便利ツールの使い方
前号でご紹介させていただきました、ツール。
みなさん、お試しいただけましたでしょうか？
たぶん、使い方がわからなかったと思いますｗ
ここでは、実際の案件で使っているノウハウを元に、ご紹介させていただきます。
▼設計フェーズ
まず、実際に制作に入るまえには、必ず「設計」というフェーズがあります。
ここでは、作り込む前に、ルールを決めたりする工程です。
設計の段階では、主に2つの成果物を作ります。
・アーキテクチャダイアグラム
です。
それでは、詳しく見て行きましょう。
【アーキテクチャダイアグラム】
僕の場合、下記の項目をエクセルのファイルにまとめて準備を行なっています。
このシートを「アーキテクチャダイアグラム」と呼んでいます。
・レギュレーション
・ディレクトリマップ
・メタ情報
この成果物が後々の実装の段階で役立ってくるのです。
こちらは、次回以降に詳しく説明しますね。
【ワイヤーフレーム】
次に作るのが、「ワイヤーフレーム」というもの。
これは、サイトの骨子を作っていくものです。
・どんなレイアウトにするか？
・どんな要素が必用か？（タイトル要素、リンク要素、バナーの配置など）
を、デザイン要素を入れずに示していきます。
パワーポイントで制作するのが主流ですが、
僕の場合は、Webサービスの「Cacoo」を使っております。
※これは、ご紹介してなかったですね！
このサービスは、共有設定などができるので、すごく重宝しています。
ぜひ、会員登録してお試しください！
デザインは、このワイヤーフレームをもとに制作をしていくことになります。
ワイヤーフレームの設計がおかしくなると、そのままデザインに反映されるので
かなり重要な作業となってきます。
ワイヤーフレームを作るにあたり、IA（インフォメーションアーキテクチャ）
に関する知識が必要になります。
IAって何？という方、検索して調べてみてください。
こちらは話が長くなりそうなので、別機会にお伝えできればと思います。
▼設計フェーズにおける、便利ツール
さて、ここからが本題です。
僕が設計を行う際に、使っているツールがあります。
それが、こちら。
・Website Explorer
これは、既存サイトの解析を行なってくれるもの。
ブラウザのようなインターフェースをしており、URLを入力して実行すると、
勝手にサイトの解析を行なってくれます。
受ける案件の6割程度がリニューアル案件なので、まずサイトの解析を行い、
サイトマップを作成します。
解析の中で、既存ディレクトリを抽出してくれたり、リンク切れなどのエラー
を教えてくれたり、かなり重宝しています。
ディレクトリごと、ローカルにファイルを保存できるという、ハッカー的な
使い方も可能です。
先方からサーバーのデータをなかなかいただけない時にも活用できます。
これらの解析結果は、エクセルのデータとしても保存ができるので、お客様に
ご提案する際の成果物としても、利用することができます。
これらの解析資料は、僕自身が楽をするための資料でもあり、お客様に提出
できる資料でもあります。
一石二鳥ですね！
ぜひ、いろんなサイトを解析してみてください！
面白いですよ！
