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

Browse By

Tag Archives: Prototyping

[Prototyping] 10 Completely Free Wireframing and Mockup Tools – ワイヤーフレーム制作に役立つツールまとめ

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

ワイヤーフレーム制作(プロトタイピング)に役立つツール類がまとめられた記事。ブラウザ内で使うオンライツールや、Firefoxプラグイン、DLして使うローカルアプリなど色々あります。Webディレクションなんかをしてる人なんかにオススメ。自分はこの手のはだいたいイラレで書くけど、プロジェクト内にイラレ使えない人がいたりするとアレだしナニなので、オンラインツールを使うようにした方がイイのかなぁとかたまに思います。間違ってもパワポで描こうなんて思いませんが。

[WebApp] Bounce – 任意のWebサイトのスクリーンショットを撮り、そこに注釈を付けてシェアできるサービス

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

入力したURLのサイトスクリーンショットを撮り、そこに注釈を付け、さらにTwitterやFacebookなどを使って有人とシェアできるサービス。トップページのURL入力欄には最初からサンプルのものが入ってるので、とりあえず何も考えずに「Grab Screenshot」を押してみましょう。すると該当サイトのSSがロードされるので、ドラッグして選択範囲を作り、そこにテキスト入力すればオッケー。これサイト制作のごく初期の段階で、モデルにするサイトを使って顧客に説明する時なんかにイイっすね。あとプロトタイピングの際にも使えるかも。サクっと使える点が何よりイイ感じです。

[Prototyping] Ultimate Guide to Website Wireframing – Webサイトのワイヤーフレーム描く時のガイドと、ツールの紹介

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

前半はWebサイトのワイヤーフレーム(WFとかプロトタイピングとか色々言い方ありますね)を描く際のガイド的記事、後半は便利なツール(オンライン、オフライン含む)の紹介記事です。Webディレクターやデザイナーの人向けの記事。デザイニングの前段階でこういうのよく描きますよね。自分は手書きかイラレが多いけど、オンラインツールにも便利なものがあるので今後使ってみようかなーとか思ってます。けどサイト制作のごく初期の段階ではやっぱり紙とエンピツが頼りになりますな。まぁWF描いてるだけだと飽きてくるのですぐにザクとか描いちゃうのが自分の場合アレだしナニではありますが。

[UI Design] Mobile Design Pattern Gallery – iOSやAndroidアプリのUIデザインをパターン分けして紹介

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

iOSやAndroid用アプリのUIデザインをいくつかのパターンに分けて、それぞれの実例を紹介したサイト。これアプリのUIデザインしてる人なら結構興味深い内容だと思う。ナビゲーション、フォーム、テーブル、サーチなどの各場面ごとに、それぞれ10程度のパターンが紹介され、さらに実例となるアプリのスクリーンショットが紹介されています。アプリ制作時のワイヤーフレーム制作なんかの助けになりそうです。また逆にレイアウトはすでに決まっていて、そこにデザインを落とし込んでいく作業をする際にも役立ちそう。最近どこもかしこもアプリアプリってね、まぁいいんですけどね。たまに「これアプリにする意味あんの?」みたいなのもありますけどね。

[Prototyping] Android GUI Mockup Tool – AndroidのUIモックアップを制作できるオンラインツール

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

Androidアプリのインターフェースを作る際に使えるウェブアプリ。画面上にあるディスプレイ部分が白紙になったAndroid端末に、右側にあるGUIパーツを配置する事でモックアップを作る事ができます。プロトタイピングとかワイヤーフレームって言った方がピンと来るかもしれないアレです。Androidは使ってないので何とも言えないけど、一通りのGUIパーツが用意されてるっぽい。デザインフェイズに入る前のレイアウト作業や、サイト遷移を作る際に役に立ちそうなサイト。AndroidアプリのUI制作とかたまにやったりしますが、iPhoneアプリほどは楽しくないなぁというのは信者的な贔屓目でしょうかね。

[Prototyping] 50 Free Web UI, Mobile UI, Wireframe Kits And Source Files For Designers – プロトタイピングに使えるデザインリソースまとめ

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

ウェブやモバイルアプリを制作する上で役立つ、プロトタイピング(ワイヤーフレームとも言いますね)用のデザインリソースをまとめた記事。デザイナーのための、というよりはむしろディレクションする人に向いてるような気がします。多くの画像ファイルはPSDで配布されてますが、中にはイラレのものやKeynoteフォーマットのものなんかもあります。デザイン入る前の仕様書なんかにこういうの使うと、なんだかちょっと仕事できる感じに見えますよね。見えませんかそうですか。

[Web Design] 30 Fresh Web UI, Mobile UI and Wireframe Kits – ウェブやモバイルウェブ制作で使えるUIキット、あとワイヤーフレームキットも

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

ウェブデザインやモバイルウェブ制作で使える、UIキットやワイヤーフレームなどの素材がまとめられた記事。Fireworksのライブラリ、Keynote用のステンシル、パワーポイント用の素材、PSDフォーマットのボタンパーツなどがあります。また記事後半では各種スマートフォンの外観やUIを含めたPSD・PNGの素材が多数用意されていて、モバイルサイトやアプリの開発に役立ちそうです。もちろんiPadやGalaxy tabなどのタブレット端末の素材もあります。コレ系の素材まとめ記事としてはなかなかホットです。

[Web Direction] 35 Excellent Wireframing Resources – プロトタイピングに便利なリソースとツール

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

サイト制作のごく初期に行うプロトタイピング(ワイヤーフレームとかモックアップ制作とか色々言います)に役立つリソースやウェブサービスを集めた記事。MockingBirdとかわりと使いやすくて、自分もたまに使ったりしてます。レイアウト考えたりディスカッションする時に使えそうな内容です。