Me温泉探訪マップ城探訪マップ「Drawter」もなかなか。commentsTweetWebサイトデザインのツールをいろいろ物色していた。なんとなく落ち着いたのがKeynoteとCodaだった。KeynoteKeynoteは、プレゼンを行うためのツールだが、このアプリはプレゼン以外にもたくさんの利用方法があると思っている。その中の一つにWebサイトのデザインツールとしての利用方法だ。利用例・方法まずはワイヤーフレームを作成するように、頭の中のイメージを作成する。こんな感じで、実際のサイトイメージを作る!Keynoteで利用で出来るステンシルも使うと更に効率的に作業ガ出来ます。UX」はKeynoteで利用できるステンシル集(無料)です。次に実際にCSSを書く時に便利なように、Div要素毎に値を書いていく。このワイヤーフレームの中にCSSの要素を書いておくとCSSを書く時にも便利!ここで少々工夫が必要。デフォルトの設定では、スライドのサイズは画面サイズの設定になっていることと、ルーラーを表示した時にスライドの中心を0(ゼロ)が設定されるので、これを変更するとより便利に利用できる。スライドサイズの変更スライドのサイズは、インスペクタの「書類」の「スライドのサイズ」を選択し、任意のサイズを設定する。ルーラ設定の変更ルーラの設定はkeynoteの「環境設定」の「ルーラ環境設定」の「起点をルーラの中央に配置」のチェックを外すと左上が0(ゼロ)になるので、CSSに書くwidthやheightをはかるのに楽チンです。CodaCodaは、と〜っても便利なツールですが、更に便利な使い方があります!デザインしている時は、HTMLとCSSの両方を一度に見たい時が多々ありますよね。そんな時はCodaでは画面を縦分割にして利用すると凄く効率的に作業が出来るようになります。こんな感じのインターフェイスになります。やり方は、Codaを起動するHTMLのファイルを開く「option」+「command」を押しながら右上(図参照「ここが縦線になる」)のボタンを押すHTMLのWindowの右側に空白のWindowが開くCSSのファイルを開くです。これで、HTMLとCSSを同時に見ながら作業が可能になります。先ほどのKeynoteを見ながらCodaの画面を切り替えながら作業をすると、かなり作業効率が上がります!同じソフトを利用している人は、既にやっている方法かもしれませんが・・・。管理って以外と面倒だったりする。大トロ定食と伊豆高原の旅~清水港の河岸の市編~WordTwitProの使用感なんぞを。Reply返信をキャンセルする。