Webやアプリのデザイントレンドを紹介。たまに雑談。

Browse By

Tag Archives: Prototyping

[UI Design] iOS 7 UI Stencil for Omnigraffle – iOS 7を対象としたオムニグラフ用のデザイン素材

  • Pocket
  • このエントリーをはてなブックマークに追加

iOS 7を対象としたWebやMobileAppデザインの、オムニグラフ用ステンシル素材。オムニグラフって以前は廉価版がMacにバンドルされてたけど、そういやいつの間にかなくなってますね。自分以前はよくこれでWebのワイヤーフレームとか描いてたんですが、最近はイラレでやるようになりました。けどコレ系の便利な素材も結構あるし、またオムニに戻ろうかなーとも思っちょります。ちなみにステンシル素材のプレビューはこちらから。本物そっくりに丁寧に作ってあるので、プロトタイプ作る際に使えそうです。

[Prototyping] Awesome OmniGraffle stencils | Graffletopia – オムニグラフ用のステンシル

  • Pocket
  • このエントリーをはてなブックマークに追加

人によっては(というかWindowsユーザーには)あまり馴染みがないかもしれない、OmniGraffle用のステンシル(画像素材)をまとめたサイト。MacでWebやUIのデザイン・プロトタイピングをする人なら、このソフトの便利さはよくご存知かと思います。自分も以前はこれメインでワイヤーフレーム描いてました(最近じゃイラレになっちゃったけど)。サイト内ではiPhone、iPad、Androidに分けて各種ステンシルが紹介されてます。Mobile AppのUI設計する際にスゴく便利そう。あ、けどiOS 7用の素材はまだないようです。

[UI Design] iOS 7 Wireframe Kit – iOS 7のワイヤーフレームキットAI

  • Pocket
  • このエントリーをはてなブックマークに追加

iOS 7のワイヤーフレームキットが配布されてます。PSDではなくAIなので、Illustratorを使ってワイヤーフレーム作る人向け。自分もワイヤーフレーム段階ではIllustrator使う事が多くて、それをデザインに落としこむフェイズになってPhotoshopに切り替えたりします。実際にダウンロードしてみたけど、モノクロでシンプルに作られたUIパーツ類は使い勝手が良さそうです。デザイナーだけでなくディレクターの人にもオススメ。

[PDF] Dot paper template – カスタムしたドットの付いた紙を印刷できるテンプレートジェネレーター

  • Pocket
  • このエントリーをはてなブックマークに追加

薄いドットが等間隔に並んだテンプレート紙を印刷するためのPDFジェネレーター。うーんなんか日本語として変な感じがするけど、まぁPDFをダウンロードできるサイトです。ドットの付いた紙って垂直線や水平線を書きやすいので、仕事柄日常的に使ってるけど、ここでPDFを生成すればプリンタでガシガシ印刷できて経済的です。このサイトのイイところは、ドットの感覚をカスタムできる所。カスタムした結果はプレビューエリアに反映されるので、ちょうどイイくらいの感覚でドットを書く事ができます。デザインする際、またプロトタイピングの際に便利っすね。

[Web Application] Red Pen – 画像に注釈を付ける事のできるオンラインツール

  • Pocket
  • このエントリーをはてなブックマークに追加

画像をアップロードして注釈を付ける事のできるオンラインツール。名前の通りの赤ペン修正サービスです。サイト内にはPNGをドラッグ&ドロップするアイコンが出てますが、JPGでも試してみましたが問題なかったです。画像ファイルを放り込むとアップロードが開始され、完了し次第赤ペンモードになります。注釈を入れたい場所をクリックするとコメント入力欄が現れ、コメントと、必要であるなら名前やメールアドレスを入力して完了。あとはそのページの固有URLを人に送れば情報をシェアできます。コメントに対してリプライする事もできます。試しにコメントを入力してみたのがこちら。あの男のプレッシャーです。あそうそう、HGメッサーラ買ったんですよ。もうなんつーかスゴいカワイい。ジュピトリス製のモビルスーツの禍々しさってタマりませんな。

[UI Design] 9 GREAT UI DESIGN TOOLS – UIデザインに役立つオンラインツール

  • Pocket
  • このエントリーをはてなブックマークに追加

UIデザインに役立つオンラインツールをまとめた記事。UIの作例集やボタンなどのパーツ素材集、モック制作のためのジェネレーター、カラーパレット生成、プロトタイピングツールなどがあります。ワイヤーフレームをオンラインで描いて共有するツールなんかは、デザイナーだけでなくディレクター的な役割の人にも役立ちそう。UI Paradeには自分もよく世話になってます。

[Freebie] 40+ free PSDs and actions for mock-ups – モックアップ制作に役立つPSDまとめ

  • Pocket
  • このエントリーをはてなブックマークに追加

WebやMobile App制作の際に役立ちそうなモックアップPSDをまとめた記事。MacBook AirやiPhone、iPod、Android端末などのハードウェア系と、それに加えてSafariのウィンドウキャプチャなどのソフトウェア系も少数含まれています。どの素材もリンク先から無料でダウンロードできます。ハードウェアの画面内にハメコミ合成したい時なんかに便利ですな。

[PDF] generatedpaper.com – 様々なフォーマットのPDF配布サイト

  • Pocket
  • このエントリーをはてなブックマークに追加

グラフ描画や子供向け、ゲームに便利な罫線ノート、ワイヤーフレーム描画(プロトタイピング)、音楽、語学、カレンダーなど様々なフォーマットの印刷用PDFを配布しているサイト。これとっても便利です。Webがらみの話がメインのこのブログ的にはワイヤーフレームの所で盛り上がるべきなんですが、個人的には音楽関連のものがホットです。普通の五線譜はもちろん、コードチャート3種類に加えてギター用のタブ譜まであります。いやまぁ言うても最近じゃ手書きでタブ譜書く機会なんてそうそうないですが、こういうものまで用意してるってのは素晴らしいなと。