アクセス解析エンジニア・兼・クリエイターの僕としては、強みが一個だけあります。 それは、コンテンツ制作の表も裏も読み解けるということ。 で、2010年になってようやく時代が変わりつつあることを実感し始めました。 ナウシカ […]
アクセス解析エンジニア・兼・クリエイターの僕としては、強みが一個だけあります。 それは、コンテンツ制作の表も裏も読み解けるということ。 で、2010年になってようやく時代が変わりつつあることを実感し始めました。 ナウシカ […]
Opera for iOS Introducing Opera One for iOS: a fresh take on mobile browsing August 14th, 2024 We're excited to announce the launch of Opera One for iOS, our redesigned, AI-powered browser for iPhone. Opera requests that the EU General Court secure the DMA’s promise of free browser choice... July 12th, 2024 Opera is appealing the EU Commission’s decision not to designate Microsoft Edge as a gateke
Webサイト ディレクターのみなさんに質問。画面構成書ってどうやって作っていますか? Webの世界では、サイトの企画者・発注者が画面構成書もしくはワイヤーフレームという設計図を作る。ディレクターが構成書を作成し、それをもとにデザイナーがUIデザインを作り、プログラマがUIの適用されてないプログラムを作成。コーダー(マークアップエンジニア)がUIデザインをHTML&CSSにして、プログラムに適用する、という流れでWebサイトを作るという感じ。プログラマ向けにはもっと細かい資料も必要に応じて提供されるけど、サイトマップと画面構成書がサイト制作発注から完成までの土台になる。これは、雑誌作りだと、台割りとラフレイアウトが仕事の土台となるのによく似ている。 画面構成書の例は、たとえば、かなりラフだけど、こんな感じ… (こんなサイトを作る予定はありません。いまのところ…) 画面構成書を作るツールとして
こんにちは、inoueです。 年が明けたばかりだというのに、自宅のTV(御年14歳)が終わりの時を迎えようとしてます。 昨夜から一発目のスイッチオンではラジオ状態(=映像が出ない)です。 とうとう買い替えかぁ…ワクワク。 さて、このところ業務でPowerPoint2007にてwebサイトのワイヤーフレームをいくつか作成しております。 ワイヤーフレーム作成ツールは、Firefoxアドオンなどでも存在しますが、既存サイトのスクリーンショットを加工しつつの 作業の場合、PowerPointが断然使いやすいです。 今回は、PowerPoint2007を使ったワイヤーフレーム作成のポイントと、今回作成したパーツテンプレートファイルをご紹介します。 ポイント1:スクリーンショットで既存サイトを利用する ベースとなる既存ページが存在する場合、スクリーンショットを取得してスライドに貼り付けていくと便利です
前回でワイヤーフレームに含まれる基本的な機能とその名称が確認できた。具体的にページを起こすために、もう少しページの専用性に配慮した状態を考えねばならない。ページのホーム、つまりサイトのURLを叩いてアクセスする先頭のページと、ホームにぶら下がっているカテゴリのトップでは、含まれるべき機能に違いがある。これを専用性と捉えて考えるのだ。 余談だがホームページという呼び名には2通りの印象が結びついている事と思う。1つは前述の定義に沿った「サイトの入り口」という考え方、もう1つは「サイト全体」を示す考え方だ。前者の意味が正しい定義で、後者は「サイト」という意味の俗称と捉えていただきたい。よくテレビCMで「この商品のホームページはこちら」などと伝えているが、これは言い換えると「商品のウェブサイト」をより親しみやすくしている形だ。 グリッドで考える さて、必要な機能を自分が手がけるサイトに適応させてい
ソフトウェアワイヤーフレーム 無料で使えるワイヤーフレームツールのまとめ Firefox 上で動作するワイヤーフレームツール Pencil をはじめ、無料でしかも便利なツールが増えてきました。紙とペンでワイヤーフレームを描くのは基本ですが、より本物に近いプロトタイプを作るのであればソフトウェアを使うのが最適です。以前紹介した「プロトタイピングの基礎の基礎」も併用に読んで今回紹介するツールの中から自分に合ったツールを探してみてはいかがでしょうか。 DIA: a drawing program UMLダイアグラムに特化していますが、ワイヤーフレームも作れます。基本的にデータは XML で保存されますが、EPS, SVG, PNG といった別形式にも書き出せます DENIM タブレットで操作すると快適そうなプロタイピングツール。サイト内をどのように移動するかを確認するには使えそうです OpenO
似たようなツールは他にもあるが、使いやすそうだったのでご紹介。 Mockingbirdを使えば簡単にブラウザだけでサイトのワイヤーフレームを作ることができる。 これから作りたいサイトはこんな感じ・・・といったプロトタイプをつくるときに便利だろう。 ちゃんと日本語も通るし、タグクラウドやビデオといった今風の部品も揃っている。 サイトの提案なんかをするときに便利ですな。覚えておくといいだろう。
前回、「IA One Sheeters」をご紹介しましたが、もちろんそれらを指してすべてが「IAタスクである」とは言い切れません。ただ少なからずIAというロール(役割)において関係してくるタスクであることは間違いないと思います。 そこで今回は、そのサンプルにもあった「ワイヤーフレーム」についてのツールを紹介します。 そもそも画面のレイアウトおよび原稿の整理という意味では、いろいろなツールが関係してきます。Web制作の現場においてはWebデザイナーやWebディレクターというロールが関わり、タスクベースにするとどのロールがそのタスクを遂行するのかが混乱しがちです。この連載ではWebデザイナーを対象として、ツールの使い方やぶつかる課題にフォーカスをあててみたいと思います。 ワイヤーフレームについて ワイヤー(線形状)でフレーム(枠)にしていくことから名前がついたと思われますが、もともとはCG(
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く