Hisashi Today

Tweet

Webサイトデザインのツールをいろいろ物色していた。そして、なんとなく落ち着いたのがKeynoteとCodaだった。

Keynote

Keynoteは、プレゼンを行うためのツールだが、このアプリはプレゼン以外にもたくさんの利用方法があると思っている。その中の一つにWebサイトのデザインツールとしての利用方法だ。

利用例・方法

まずはワイヤーフレームを作成するように、頭の中のイメージを作成する。

こんな感じで、実際のサイトイメージを作る！

Keynoteで利用で出来るステンシルも使うと更に効率的に作業ガ出来ます。

「Keynote UX」はKeynoteで利用できるステンシル集（無料）です。

次に実際にCSSを書く時に便利なように、Div要素毎に値を書いていく。

このワイヤーフレームの中にCSSの要素を書いておくとCSSを書く時にも便利！

ここで少々工夫が必要。デフォルトの設定では、スライドのサイズは画面サイズの設定になっていることと、ルーラーを表示した時にスライドの中心を0（ゼロ）が設定されるので、これを変更するとより便利に利用できる。

スライドサイズの変更

スライドのサイズは、インスペクタの「書類」の「スライドのサイズ」を選択し、任意のサイズを設定する。

ルーラ設定の変更

ルーラの設定はkeynoteの「環境設定」の「ルーラ環境設定」の「起点をルーラの中央に配置」のチェックを外すと左上が0（ゼロ）になるので、CSSに書くwidthやheightをはかるのに楽チンです。

Coda

Codaは、と〜っても便利なツールですが、更に便利な使い方があります！

デザインしている時は、HTMLとCSSの両方を一度に見たい時が多々ありますよね。そんな時はCodaでは画面を縦分割にして利用すると凄く効率的に作業が出来るようになります。

こんな感じのインターフェイスになります。

やり方は、

1. Codaを起動する
2. HTMLのファイルを開く
3. 「option」＋「command」を押しながら右上（図参照「ここが縦線になる」）のボタンを押す
4. HTMLのWindowの右側に空白のWindowが開く
5. CSSのファイルを開く

です。

これで、HTMLとCSSを同時に見ながら作業が可能になります。先ほどのKeynoteを見ながらCodaの画面を切り替えながら作業をすると、かなり作業効率が上がります！同じソフトを利用している人は、既にやっている方法かもしれませんが・・・。