Hatena::Groupiphone-dev

Ni chicha, ni limona - 平均から抜けられない僕

2009-08-11

[iPhone][Develop] iPhone UIデザイン用のシートを作ってみた(第2弾) 19:25  [iPhone][Develop] iPhone UIデザイン用のシートを作ってみた(第2弾) - Ni chicha, ni limona - 平均から抜けられない僕 を含むブックマーク はてなブックマーク -  [iPhone][Develop] iPhone UIデザイン用のシートを作ってみた(第2弾) - Ni chicha, ni limona - 平均から抜けられない僕  [iPhone][Develop] iPhone UIデザイン用のシートを作ってみた(第2弾) - Ni chicha, ni limona - 平均から抜けられない僕 のブックマークコメント


※少し前の記事:「紙上でUIデザインするときの実寸大iPhoneスケッチPDFを作ってみました」の第2弾です。


背景

上記記事ではiPhoneUIデザインを補助するPDFを作成したわけですが、同じようなコンセプトのスケッチブックが、すでにAmazon.comで販売されていることを知りました。グリッドの中央にiPhoneが配置されて、UIをデザインしたり関連するアイデアをメモできるようにしてあったりする、なかなかのアイデア商品です。


  「iPhone Application Sketch Book ($14.99)」

    → Amazon.comの同商品へのリンク


これは良いかも!と思って衝動買いしようかと思ったのですが、よくよく考えてみると「こうだったら良いのに」と思う点がいくつかあることに気がつきました。列挙すると、


  • 画面内にもグリッドが書かれていて、なおかつピクセル間隔と一致していると良い
  • ここで発生するイベントやアクション/アウトレットなどを、どのシートでも同じ場所に書きたい
  • 現在のページ、もしくはタグを記入できる場所があると、後の管理が楽そう

といったところ。特に最初の要望は場所指定の目安になるだけに、けっこう重要だったりします。


そこで

そこで一念発起して(そこまで大げさじゃないですけどね)、OmniGraffleを使って自作することにしました。


・・・悪戦苦闘の1時間後、完成したのが以下のシート。


   f:id:paella:20090811185053p:image:h300


手前味噌で恐縮ですが、なかなか使いやすいものが出来ました。工夫したポイントは、


  • グリッドを画面の20ピクセル相当の大きさで描いた
  • iPhoneを少し左側に配置して、アイデアや補足を書く欄を大きくした
    • そのため右利きの人向けのデザインになってしまったのですが・・・。
  • 下部にメモ欄を配置して、そこに色々書けるようにした。
  • メモ欄の先頭にはInterface Builderのアクション/アウトレットのマークと同じ丸記号を配置することで、UIとの関連づけをイメージしやすくした。
  • 最下部にはページやタグを書ける欄を設けて整理しやすくした。

といったところです。


というわけで

本ファイルはPDF化してサーバーに置いておきましたので、どうぞご自由に使ってください。


  「KatokichiSoft謹製 iPhone UIスケッチ用シート」(PDF注意)

   → http://cielo.rojo.jp/files/iPhoneSketchSheet.pdf


もし使っていての要望や変更の要求があったらゼヒゼヒ教えてください。こういうDTP経験に乏しいので、今後のためにも意見を聞きたいと思っています。


参考:このシートはどうやって作ったか

参考ですが、このシートも第1弾と同様、OmniGraffle 5 Professional*1を使用して作成しました。


   「OmniGraffle 5 Professional*2


iPhoneスケッチのステンシルGraffletopiaで公開されているものを使用し、グリッドOmniGraffle 5からの新機能である表作成機能を使っています。

このOmniGraffleの何が良いかというと、まず何よりもオブジェクトを配置するときのアシスト機能(=スマートガイド)が非常に優れていること。

たとえば画面上に配置したオブジェクトドラッグして移動/拡大縮小しているとき、

 「今このオブジェクトの間隔はこの間隔と同じだよ、何ピクセル(inch,cm)だよ」

 「オブジェクトの中央がこのオブジェクトと一致したよ」

 「テキストのベースラインが揃ったよ」

などを事細かに伝えてくれて、初心者でもオブジェクトをキレイに配置することが出来ます。Interface Builderにも同様の機能がありますが、それなんか目じゃないくらいの気配りっぷりです。IBが1回ガイドしてくれる間に、5-6回はガイドしてくれます。本当に至れり尽くせりのアシスト機能。


それでいてInkscapeのような敷居が高さが全く感じられないように出来ていて、ごくスムーズに絵を描けます。アウトラインエディタのようにも使えて、簡易マインドマップ(もどき)なんかもササッと作れたり。


自分が作成しているアプリアイコンもこれで作成しています。「Illustratorは高いけど、Inkscapeにしたところで敷居が高いよなあ。でもキレイなデザインの絵を描きたいな」と思っている方は、絶対に買って損は無いと思います。デザイン下手な私ですが、それでも投資対効果は予想以上でした。


ともかく、まとめ

iPhone UIのデザイン用シートを作ってみたので、ぜひ感想を聞かせてください。

OmniGraffle 5(特にプロの方)は使いやすいですマジで。

*1:act2.comへのリンクです。

*2Amazonインスタントストアへのリンクです。

tokentokentokentoken2009/08/17 08:05はじめまして。
OmniGraffleはフローチャートなどの図を作るときに便利なのかと思っていましたが、アプリアイコンの作成にも使えるのでしょうか?
どのように使われているか紹介してもらえるとうれしいです。
iPhoneアプリアイコン作りでは何度か苦労しましたので...

paellapaella2009/08/18 13:25返信が遅くなってしまってすみません。

OmniGraffleは画像を配置したり、それぞれをレイヤで分けて管理できるようになっていたりしますので、背景のグラデーション作成やオブジェクトの位置微調整などで役立ちました。

上に置かれた図形の形で下の図形を切り取ったり融合させたり、ベジェ曲線も引けるのも便利なところです。

イラストレータやInkscapeなどでは敷居が高いと感じた人(私のことですが)にはちょうどよい、便利なツールだと思います。

rotoroto2009/08/18 20:06検索したらまさに欲しかったものがありました。
ありがたく使わせていただきます。

rotoroto2009/08/18 20:16と思ったら、印刷したら実物より微妙に大きく印刷されました。前のバージョンのPDFを印刷したときは実物大だったんですけどね。PDFのプロパティを見比べると「ページサイズ」が微妙に異なるのが原因でしょうか?もし分かればお教えいただけるとありがたいです。ちなみにAcrobat Reader9でA4で印刷してます。

paellapaella2009/08/18 21:23rotoさん:
使っていただいてありがとうございます。確かに、今回のは少し大きくなってしまっています。OmniGraffleでページ単位をピクセルにして、72dpiで一致するように作ったものの、それだと少し大きくなってしまうようで。

やっぱり原寸大の方が使いやすいでしょうか?別バージョンとして、ちょっと作り直してみます。
コメントありがとうございました。

tokentokentokentoken2009/10/17 08:39情報ありがとうございました! OmniGraffle 5.0買いました。
確かに良いアプリケーションです。

そして、デザイン用シートも印刷して使ってみました。とても良いです。iPhoneステンシルを買おうと思ってましたがこちらの方がよいですね。

使ってみて思ったのですが、座標を簡単に知るためにiPhone内では100ドットごとに線を太くしてみてはどうでしょう。
自分は100ドットごとに印を付けて当たりを付けていますが。
絶対無いと困る、というわけではないですが。

paellapaella2009/10/21 21:34コメントありがとうございます。使いやすいですよね、これ。

100ピクセルごとに、という案は面白いので、ちょっと検討してみます。rotoさんの要望と合わせてアップデートを考えていますので、頑張ってみますね。

nonamenoname2014/06/03 07:47シートのリンク先が404になるのですが、もう利用できないでしょうか?