柔軟性あるデザインプロセスへ移行するためのヒント
電子書籍「エクスペリエンス ポイント」の紹介ページを作ったときのプロセスがStorifyに掲載されています。スケッチからブラウザー上でデザインのアイデアを固めていく様子を見られます ワイヤーフレームはWebデザインに必要か？ ここ数年で Web とユーザーとの関わり方が劇的に変わり、開発環境も大きく変わりました。こうした中で、私たちが10年近く培ってきた設計・開発における“当たり前”を見直す時期に来ています。WebサイトやWebアプリケーションの設計・開発において必須といわれていた「ワイヤーフレーム」もそのひとつです。 「ワイヤーフレームは必須だ」と思って作っていることもあるかもしれません。しかし、ワイヤーフレームにはいくつかの課題があります。 ワイヤーフレームは実物とかけ離れた存在であるため、描かれている内容を理解するにはWebサイトやWebアプリケーションへの深い理解が必要になります。
どんなサイトも一発で「ワイヤーフレーム」に変換してしまうブックマークレット「Wirify」
他のサイトのデザインを研究するために、画像や文章のレイアウトを直線や四角などの簡単な記号で描いたワイヤーフレームに起こすことがありますが、この「Wirify」ブックマークレットを使えば、クリック一発でワイヤーフレームに変換してくれます。 インストールは公式ページから、赤丸のリンクをブックマークツールバーにドラッグ＆ドロップしましょう。 Volkside | Wirify homepage – The web as wireframes [Temporary mirror] こんな感じになればインストール完了です。 後は目標のページでボタンをクリックするだけ。 このようにワイヤーフレーム表示となります。 以前紹介したサイトのスクリーンショットをキャプチャするためのFirefoxプラグイン「Screengrab」と組み合わせるとサイト全体のワイヤーフレームを取得することもできます。 よい学習は
実例でわかる！スマートフォンサイトの画面設計 (1/3)
スマートフォンサイト設計の基礎知識に続いて、今回からは実際のスマートフォンサイト制作のプロジェクトの流れに沿って、具体的なサイト設計と制作方法を解説します。ぜひ一緒に手を動かしながらスマートフォンサイトの制作の流れを学んでいきましょう。 実在するサイトが課題です！ 題材にさせていただくのは、東京都江東区で幼児向けのプリスクール（就園準備スクール）を運営する「プレイグループ木場校」さんのWebサイトです。 プレイグループ木場校のWebサイトでは、入学を検討している保護者やすでに通学中の生徒の保護者へ向けて、さまざまな情報を提供しています。カリキュラムや先生の紹介といったスクール案内に加えて、コラムなどのコンテンツも充実しており、情報量はかなり多い方だと言えます。 今回はこのWebサイトのスマートフォン対応の企画、設計について考えてみましょう。 ゴールの設定とコンテンツの選定 スマートフォンの
無料で使えるワイヤーフレームツールのまとめ : could
ソフトウェアワイヤーフレーム 無料で使えるワイヤーフレームツールのまとめ Firefox 上で動作するワイヤーフレームツール Pencil をはじめ、無料でしかも便利なツールが増えてきました。紙とペンでワイヤーフレームを描くのは基本ですが、より本物に近いプロトタイプを作るのであればソフトウェアを使うのが最適です。以前紹介した「プロトタイピングの基礎の基礎」も併用に読んで今回紹介するツールの中から自分に合ったツールを探してみてはいかがでしょうか。 DIA: a drawing program UMLダイアグラムに特化していますが、ワイヤーフレームも作れます。基本的にデータは XML で保存されますが、EPS, SVG, PNG といった別形式にも書き出せます DENIM タブレットで操作すると快適そうなプロタイピングツール。サイト内をどのように移動するかを確認するには使えそうです OpenO
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
http://e0166nt.com/blog-entry-872.html
