こんにちは、いつかiOSのデザインのみで食べていきたい鈴木(@suzukisan__)です。 まだまだ若輩ですがiOSのデザイン環境について紹介させて頂きます。 画面設計 iPhone Idea Sheet あまり紙でやることはないのですが、使う場合はこちらのiPhone Idea Sheetです。 うちではむしろエンジニアさんのほうが使っています。 三階ラボ | iPhone Idea Sheet ver.01 あまりに使いやすいのでiPhone5用にiPhone5 Idea Sheetなるものをうちで作成しました。 iPhone5のワイヤーフレームに使えるアイデアシートをイラレで作りました | ナナメウエblog POP 本来は紙に書いたワイヤーフレームから画面設計をイメージするためのものだと思いますが、普通にデザインだけしてコーディング前の画像を取り込んで画面推移を説明す
Webサイトやアプリを制作する場合、デザインを作り込む前に触って動くプロトタイプを作ることで、あらかじめ使い勝手の良し悪しなどを検証することができます。今回紹介するTAP（Touch Application Prototypes）を使うと、Fireworksで簡単にモバイル向けのプロトタイプを作成できます。 よくあるWebサイト制作の実装工程について確認しましょう。まず、PhotoshopやFireworksなどのツールを用いてデザインの作業を行います。次に、作成したデザインカンプを元に、パーツをスライスし、コーディングをしてからはじめて「動く」「触れる」ものを作ります。こうした工程の場合、実際に動く状態を見てから問題に気づき、要素の配置や装飾の変更などが発生し、大きな手戻りが生じるというのを経験している人も多いのではないでしょうか。 そうした問題を解決・軽減するために「プロトタイピング」
突然ですが、ペーパープロトタイプって知ってますか？ 実演ムービー 今まで気がつかなかった問題に気づけたりと、かなり強力な武器になります！ これをiPhoneの画面で気軽にできないかなー、お客さんに触ってもらったりできないかなーと思ってました。 ピンと来るやつが無かったので、作っちゃいました！ iPhone上で動く フルスクリーン対応（アプリによる） ファイルを開くだけなので、メールで送ったり共有も簡単！ 後からの追加、削除も柔軟に対応可能 デフォルトのUIを使わない場合のテストに真価を発揮します やり方は超簡単なので、今すぐに試すことができますよ！ 簡単なサンプルファイルも最後についてます！ それでは「続き」からどうぞー！ ペーパープロトタイプとは 新しい製品、サービスを開発するとき、スケッチを紙芝居の様に動かしながら、テストユーザーに触ってもらうことで使い易さや機能要求などを開発初期段階
Meet the All New UI Builder for Building Responsive Websites! FlairBuilder is a lightweight and simple wireframing tool that lets you create interactive wireframes for websites. It's clean and easy to use, and comes with a lot of features. FlariBuilder is currently under development, but you can join our waiting listing to get notified when we release it. At Fantastech, we're a WordPress developme
One Ping Pingback: 10 Excellent Tools for Creating Web Design Wireframes | Tools 40 Comments Cool round-up. Stuff like this keeps me sane =) Great Post! I found a few things to download I didn’t already have. That’s awesome. Thanks so much, guys- you have no idea how much time this will save me. thnx for featuring my work here … TWICE 🙂 cheers m. Great post of ending 2009 i like it, here is all s
ジャズのスタンダードナンバーに「It's Only A Paper Moon」という曲があるのをご存じでしょうか？ ◆Jamtoast: It's Only A Paper Moon ～いわしの頭も信心から？～ http://www02.so-net.ne.jp/~jamtoast/paper-moon.html そう、それはボール紙に書いた海を渡る、ただの紙の月さ。 でも、君が僕を信じれば、つくりものではなくなるんだ。 そう、それはモスリンで作った木の上にぶらさがっている、ただのキャンバス地の空さ。 でも、君が僕を信じれば、つくりものではなくなるんだ。 ＜本文より引用＞ 信じれば「単なる作り物でなくなる」のは、紙のお月様だけではありません。紙で作ったインターフェイスでも、ユーザを“その気”にさせれば、強力な設計ツールになります。 ペーパープロトタイピング翻訳版 このペーパープロ
先日、UXブッククラブを開催しました。今回の課題本にはキャロリン・スナイダーの『ペーパープロトタイピング（原題：Paper Prototyping）』を取り上げました。 実は、本書については５年前の発売直後にも一度記事を書いています。 その当時、もうペーパープロトタイプは目新しい手法ではありませんでした。古くはヤコブ・ニールセンの『ユーザビリティエンジニアリング原論』（1994年）に記述がありましたし、ネット上でも実践ガイドを目にする機会が多くありました。本書の中にも1970年代にNCR社やゼロックス社で行われたプロジェクト例が紹介されています。 さて、そんな"枯れた"手法を、今になってわざわざUXブッククラブで取り上げたのは、私が懐古趣味だからではありません。実は、この５年くらいの間に、ペーパープロトタイプはその利用場面がかなり変化しているのです。 従来の使い方 名詞の「ペーパープロトタ
春ですね。 「プロペパ君」（『キッズのための、紙で作るＷｅｂサイト（というかページ）設計』）の別バージョンを作ってみました。 少しパーツを増やしてみました。LEGOと一緒でパッケージになりすぎると想像力が刺激されなくなると思いつつも試しに増やしてみました。（そのうちpdfにするかもしれません）追記：しました。記事の終わりにあります。 地道にはさみでチョキチョキ・・・。 写真じゃわかりにくいですが、なんと今回はマグネットでペッタンコです。 では、Webでよく使うレイアウトをどこまで作れるかチャレンジ開始。（3カラムはやってません。第三の目で適当に右か左にナビゲーションを想像して追加してみるといいかもしれません。） ■トップページなどで多いオーソドックスなタイプ コンテンツ部分が広めで余りがち。トップはやはり配置するものがどうしても多くなるので、項目が多い場合は、あとでバナーをぺたぺた貼る羽目
こどもでも、コンピューターが触れなくても、絵があんまりかけなくても。作れるとはいわないけど、ほんの第一歩？にはなるかな？？ 「キッズのための、紙で作るＷｅｂサイト（というかページ）設計」 ↓台紙セットをしよう！ ↓ ロゴをつけてみよう！急にサイトに愛着が沸くかもしれないけど、見る人の気持ちをシカトしたらだめだよ！ ↓ 次にグローバルメニューを置いてみよう！全部のページ共通のメニューだから厳選して項目は考えよう！ でも、サイトを作ってから後でよく考えてなおせばＯＫだよ！ ↓ さて、サイドメニューだよ！横っちょによくあるやつだけど、いらなかったら置かなくてもいいよ！ 最後に必要なかったらとってしまってね！ サイトのページがどんどん増えていくときはあったほうがいいと思うけど、横にあるのがベストかどうかは決まってないよ！紙だからどんどん動かしてみてね！ ↓ 次は地味だよ！ いわゆる、個人情報保護方
ウェブサイト制作でもプロトタイプを作成する機会が増えてきたと思います。しかし、プロトタイプ一言でいっても様々な方法で作ることが出来ます。今まで様々な種類のプロトタイピングを紹介したことがありますが、どの方法を使った方が良いか迷うところです。短時間で作れるかどうかだけでなく、誰と共有するのか、変更がしやすいか、完成品とどれくらい近づけるのかなど考慮したい項目は幾つかあります。Adobe Dev Center の「Industry trends in prototyping」という記事では、プロトタイプのメリットだけでなく、よく使われているプロトタイピングも紹介しています。この記事も参考にして、幾つかあるプロトタイピングの長所・短所を考えてみました。 紙のプロトタイプ すぐに作れるメリットはあるが、完成品と使い勝手が異なるだけでなく、再利用も難しい クリック可能なスクリーンショット PDFなど
著者: Jan Verhoeven件名: Prototyping with PowerPoint日付: 2003年12月6日URL: http://www.jansfreeware.com/articles/misc-prototyping.html訳者: Arata Kojima Prototyping with PowerPoint この記事では、パワーポイントを使ったデスクトッププログラムとWebアプリのインターフェースのプロトタイピングについて扱っている。 また、マイクロソフトのパワーポイントに焦点を合わせているが、OpenOfficeのようなほかのプレゼンツールでも大体は同じようにできる。 この記事のために、私はパワーポイントの2000を使った。ここで扱ったものはjansoft.pptを参考にしてほしい。 パワーポイントを使うことの利点 なぜプロトタイピングにパワーポイントを使う
FirefoxにGUIプロトタイピングの機能を追加するものすごい拡張「The Pencil Project」 2008年07月09日- Home - Pencil Project FirefoxにGUIプロトタイピングの機能を追加するものすごい拡張「The Pencil Project」。 Pencil Projectを使えば、予め用意されているGUI部品をキャンバスにドラッグ＆ドロップしてプロトタイプの画面イメージを作成することができます。 ボタンなんかも、ダブルクリックでキャプションを変えることができたり、VisualBasic、VisualC++などのアプリを使って画面デザインをしているイメージに近い操作感が実現できています。 アプリっぽい画面を作ってみましたが、超簡単です。 GUIのスタンドアロンアプリだけでなく、Webサイトにも使うことが出来ます。 HTMLを使って簡単に画面を作
実際に動的なウェブサイトを作ってしまう前に、紙上でデザインや部品の配置、画面遷移などを確認するペーパープロトタイピングという設計技法があります。書籍もありますね。 ペーパープロトタイピング 最適なユーザインタフェースを効率よくデザインする そのペーパープロトタイピングの事例を集めたページというのがありました。たとえば次のこれは、2000年5月31日にスケッチされたtwitterのプロトタイプです。当時はstat.usという仮名で、これによるとtwitterはLiveJounal(ブログサービス)とAIM(インスタントメッセンジャー)から最初の着想を得てから実装まで5年以上の間があったことになりますね。 FlickrのPlacesページやVimeoなどのペーパープロトタイプの写真も紹介されています。 こちらは韓国のポータルサイトDaumのAjaxウェブメール開発時に行なわれた、ペーパープロト
【2024年12月】レンタルサーバーおすすめ10社を徹底比較！ 人気ランキングも PR 最終更新日：2024年12月26日
プロトタイプを作るソフトウェアは Visio のような高度な機能があるものを含めて複数あります。一番最初の段階であれば紙でも良いと思いますが、Webサイト上でのインタラクションを可能な限りリアルに再現して検証するにはパソコン上で行うのが最も適しています。どのツールが良いか迷っている方もいると思いますが、どうやら Microsoft では PowerPoint 2007 がワイヤーフレームを作るツールとして使っているそうです。 2007年、韓国で開催されたカンファレンスで PowerPoint 2007 を使ったワイヤーフレームに関するセミナーがありました (Silverlight ムービー)。Microsoft には Visio があるのになぜ PowerPoint を使うのかというと、PowerPoint のほうが使える人が圧倒的に多いだけでなく共有もしやすいからだそうです。例えば Ex
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く