[B! ディレクション] nebosのブックマーク

Webサイトのワイヤーフレームの作り方 ― FigmaやXDを開く前の３ステップ｜重松佑 / Shhh inc.

先日1500ページくらいのやや大きめなコーポレートサイトのワイヤーフレームをディレクター、デザイナー、テクニカル担当、アシスタントという職能や経験もバラバラのチームで共同作成しました。みなが足並みを揃えて進めていけるようにワイヤーフレームの作り方を要素分解して、共通理解を持って作業をできるようにしました。どのような手順や考え方で進めていったのかをnoteにも記しておきます。 0. 情報設計とトンマナ設計を分けて考える Webサイト制作ではデザイン着手前の工程でワイヤーフレームと呼ばれるWebサイトの設計図のようなものを多くの場合で作ります。デザインとの違いは何かというと、上図のようにワイヤーフレームでは「情報設計」を主として扱います。そのためトンマナ（トーン&マナー）と呼ばれるWebサイトの印象や雰囲気を形作る要素については考えず、Webサイトに掲載する情報について決定することが目的となり

nebos 2023/06/09

“ディレクターがワイヤーフレームを書いて、デザイナーがそれを基にデザインを作成するという慣習がなぜかありますが、ワイヤーフレームもデザインの一部なので一緒に作ったほうが良い”

ディレクション

リンク

＜続編＞Webサイトのワイヤーフレームの作り方 ― FigmaやXDを開いた後の工程｜重松佑 / Shhh inc.

この記事ではワイヤーフレームを作成するとき、FigmaやXDを開いて手を動かす前に、情報設計をどのように整理し、考えていくかについてまとめています。記事内でWebサイトでワイヤーフレームを作成するときに注意したい点として、下記のように書きました。ツールを立ち上げてアレコレと考えながら手を動かすとフォントやレイアウトにこだわりだしたりしてしまい、あっという間に時間がなくなってしまいます。考えてから形に落とすことを徹底するためにIA︵情報設計︶を考え抜くことが大切です。 0. 情報設計とトンマナ設計を分けて考える情報の優先度、情報の量、情報の回遊性といったIA︵情報設計︶を考え抜くことはワイヤーフレーム作成において最も重要です。IAを考え抜いたその後に、FigmaやXDを使ってワイヤーフレームを形にしていきます。では実際にワイヤーフレームを形にしていくとき、どのような工程で進めていくと良いか

nebos 2023/06/09

リンク

Webサイトのプロジェクトの進め方、ディレクション、デザイン、実装など、制作と運用に必要な知識が学べる良書

Webサイトのプロジェクトの進め方、ディレクション、デザインの発注、設計、構築、運用、メンテナンスなど、Web制作に必要な知識を網羅的に学ぶことができる解説書を紹介します。 Web制作の業務に関することがほどよいボリュームでまとめられており、制作と運用に関する全般的な知識を身につけることができます。本書はWeb制作に携わる人、特にプロジェクトリーダーやディレクター、また会社内のWeb担当者などプロジェクトに包括的に携わる人にお勧めします。考え方や用語も詳しく解説されているので、プレゼン資料や企画書の作成にも役立ちます。

nebos 2021/06/07

リンク

Webデザインとグラフィックの総合情報サイト - MdN Interactive - WEBディレクションの極意第3回

WEBディレクションの極意文＝島元大輔大阪のWeb制作会社でWebディレクターとして活躍後、︵株︶キノトロープに入社。数多くの企業Webサイト構築プロジェクトにかかわる。その後、︵株︶ライブドアに入社、現在は︵株︶セシールに在籍。著書として﹁だから、Webディレクターはやめられない﹂︵ソシム刊︶。 url.blog-project.cecile.co.jp/ 第3回 Webサイトの設計企業のWebサイトを構築するとき、制作から運用までさまざまな人物がかかわることになる。その多くの人物をまとめあげ、作業をスムーズに進行させるためにWebディレクターの存在は欠かせない。そこで、ここではWebディレクションに焦点を当てて、Webサイト構築・運用の進め方、コツ、心得などをそれぞれの場面ごとに解説していこう。前回は、Webサイト構築の戦略的な部分である﹁現状分析﹂と﹁企画﹂について紹介

nebos 2015/06/03

ディレクション

リンク

EFO（エントリーフォーム最適化）でお問い合わせのCVRを爆上げするグロースハック | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作

こんにちは、エディターのエリーです。みなさん、エントリーフォームを最適化できていますか？わたしが前職でポイントサイトのディレクションをしていた頃、会員獲得のためにエントリーフォームをよく改修していました。出口の見えない洞窟のようで、結局最後まで答えが見えませんでしたが、今ならもっと健闘できそうです。なぜなら、EFOでCVRを爆上げするためのグロースハックを、EFOに関するノウハウが豊富なショーケース・ティービーさんにお聞きしたから！今回はそのノウハウをみなさんに共有したいと思います。 ▼もくじ EFO︵エントリーフォーム最適化︶とは？よくあるエントリーフォームの失敗 1. 送信が完了できない 2. エラーが出ても、間違いの箇所がわからない 3. エラーの度に再入力が必要な項目が多い 4. 誤った操作で入力がクリアされる 5. マイナーブラウザで動作しないor文字化けする6

nebos 2015/05/19

エントリーフォームのコンバージョンアップのための施策。具体例。

リンク

これで完璧！Webサービスの情報設計をカンタンにする設計用テンプレート完全版

はいこんにちは。最近なぜか風邪が治らないナカムラです。何食ったら健康になれるんでしょうか。誰か教えてください。さて、サイトを作って！とザックリ投げっぱなされた依頼について、何を掲載するべきで何をどう設計するべきなのか。悩みますよねぇ・・・。今回は日本ディレクション協会の人気講座﹁0からのWebディレクション講座‥設計編﹂で、DCHSの高瀬さんが非常に分かりやすい見解と考えまとめ用のテンプレを公開してくれましたので紹介してみます。以前からこのサイトでもその重要性についてブツブツ言っている感情設計についての考えとも重なる部分多めでしたので、両方読んでいただけると理解が深まるかもしれません。感動設計テンプレート＆講演資料ユーザーが感動するウェブサイトを実現するために必要な情報設計とは？高瀬さんいわく全てのWebサイト、サービスは﹁ユーザーを感動させるため﹂に存在しているし、そうあるべ

nebos 2014/02/04

ユーザーが感動するウェブサイトを実現するために必要な情報設計

リンク

RFP(提案依頼書)とは？意味を理解してらくらく作成！[サンプルあり]／第3回 | 中小企業のための失敗しないWebシステム発注・開発

nebos 2013/03/19

リンク

ディレクターは「ズケズケ言い過ぎ」くらいでちょうどいい（ワークショップレポート）

こんにちは。最近読者さんが増えて来てるような気がして気分が浮ついているナカムラです。先日またしてもワークショップの講師役として登壇させていただく機会がありましたので、今回はその内容をふりかえりつつ、表題にあるようなお話をお届けしたいと思います。まずワークショップについて 2013年2月16日︵土︶、講師やWebデザイン関連書籍の著者としても有名な千貫りこさんの呼びかけのもと、ちょっとクローズドなワークショップが最近何かと話題な﹁コワーキングスペース茅場町 Co-Edo︵コエド︶﹂で開催されました。タイトルはずばり﹁中村健太のディレクション講座﹂ｗｗストレートすぎるタイトルまんまですが、僕が講師役として登壇し﹁ディレクションに置いて遠慮はむしろプロジェクト成功の妨げになるよー﹂みたいな事をお話させていただきました。本来求められるのは”タブーなき意見” クライアント側の担当にしても、自

nebos 2013/03/12

「この企画内容ではユーザーに届かない」「どうしてユーザーが何を求めているか考えなかったんですか？」あくまでユーザーのための視点に立って”ボカさないで”真正面からぶつけてみる。

ディレクション

リンク

クライアントを巻き込むディレクションとRFPの重要性～ワークショップレポート

2013年1月12日︵土︶、秋葉原のGARAGE AKIHABARAで﹁Webディレクションリテラシー向上ワークショップ～クライアントサイドを巻き込んだディレクションとRFPの重要性～﹂を開催させていただきました。なんと当初見込みの15人を大幅に超え、40人超の方々が会場に集合。なんかすごい熱気になっていました。お集まりいただいた皆様に心からの感謝と﹁集まりすぎだろう﹂というツッコミを贈らせていただきます。また実際の案件を題材として持ち込んでいただいた、ライオン株式会社の坂本さん本当にありがとうございました。ディレクションは本当は一人きりでやっちゃいけないさて今回の講義の主題ですが、もう徹頭徹尾こればっかり叫んでたような気がします。プロジェクトのディレクションは本来制作会社のディレクターが一人きりでやればいいってものではなく、クライアントさんにも参画してもらわないとうまくいか

nebos 2013/01/15

神様をユーザーと仮定するならクライアントの担当とディレクターは相棒になれるはず

リンク

役立たずなディレクターにならないためのコンセプトの考え方と具体的手法―ワークショップのスライド公開

先日行ったディレクターワークショップについて、ちょいちょいスライドが見たい！とのお声をいただいたので今更ながら公開します。勢いよく書き上げたものな上、しゃべりまくる前提で書いてしまったのでかなり読みにくいとは思いますが、全画面表示すれば多分何とかなるんじゃないかなーとか思います。ワークショップ資料01初日に公開したもの。ワークショップのそもそもの目的からサイトコンセプトの考え方。コンセプトシートの実際の作り方などについて書いてあります。今回は課題がコーポレートサイトのリニューアルだったこともあり、そこそこ汎用的な内容になってる・・・といいなぁ。このスライドを見ながらあれこれしゃべった後、実際に参加者全員でエンドクライアントを囲んでヒアリング大会を行いました。以前あげたレポートでも書きましたが、自分以外の人が何を書くのか？は結構興味深かったですね。ワークショップ資料02こちら

nebos 2012/12/03

クライアントでもなく「ユーザーのため」という軸をもってディレクションに臨め

ディレクション

リンク

キャッチコピー力を1ランク上げてくれる「メリットのメリット思考法」(プレゼンにも使えるよ) | お土産屋さんブログ

これはわたしがプレゼンで失敗したときに、元上司から受け継いだちょっとしたおまじない。このおまじないのおかげでキャッチコピーを考えるのがとても楽になった。ある観光地にお店を開いた、脱サラオヤジの物語脱サラした一人のオヤジが生まれ故郷の観光地にお店を開いた。地元で採れた果物や野菜をミキサーにかけ、果汁100％のジュースを売るフルーツパーラーだ。ほんとうは脱サラの定番であるラーメン屋を開きたかった。だけど観光地でラーメンを食べる観光客は昔ほど多くないらしい。事実、幼馴染のシゲちゃんが父親から引き継いだラーメン屋は売上が落ち込み、カレーやうどん、冷やし中華、さらには焼きそばまで始めたが、結局は潰れてしまった。オヤジは考えた。考えた末に行きついたのがフルーツパーラーだった。自然と古い町並みに恵まれたその観光地は、夏は子供連れの家族やカップル、春や秋は定年したじいちゃんばあちゃんや

nebos 2012/09/06

お客さんのメリットを考える。キャッチコピーの話。メリットは、自分の視点。お客さんのメリットは、メリットのメリット

リンク

広告営業マンと仕事するWebディレクターが気をつけるべき5つのポイント : LINE Corporation ディレクターブログ

こんにちは、NHN Japanの広告事業グループに所属している阿部です。今回は趣を変えて、本編の前にいきなり告知です！ NHN Japan広告営業職採用セミナー開催！講演﹁Emotion×Context﹂マーケティング時代に向けた広告セールスの役割登壇者‥NHN Jpana株式会社　執行役員　田端信太郎日程‥2012年7月19日︵木︶時間‥18‥30開場　19:00開演　21:00頃終了︵懇親会含む︶会場‥NHN Japan株式会社大崎オフィス〒141-6023　東京都品川区大崎 2−1−1 ThinkPark Tower 23階︵セミナー会場‥NHN Japan 大崎オフィス受付横　カフェスペース︶先日のLINEカンファレンス[Hello, Friends In Tokyo 2012]で発表したLINEの今後の展開の中で、NHN Japanの広告事業が次にどのようなステージにい

nebos 2012/07/10

リンク

WEBサイトリニューアル時に営業に確認したい5つのポイント | Web担当者Forum

企業の顔となるWEBサイトリニューアルでは、どの会社様も慎重になり、7社、8社を呼んでのコンペとなることも少なくありません。そんなコンペの現場でお客様から一番よく聞く声は『何を基準に選べば良いのかわからない』というものです。何を基準に選べば良いのかわからずに選定期間が延びてしまう。さらには、間違った会社を選んでしまい、リニューアルしたものの効果が出ない。そういった例をたくさん見てきました。そこで今回は、過去400社以上のBtoB企業様に伺いし、100社以上のBtoBWEBサイトリニューアルのコンペに参加してきた私から『WEBサイトリニューアルのコンペで営業担当に確認するべきポイント』をお伝えします。 ■１．BtoBサイトの制作実績があるか全国に約6,000社あると言われている制作会社ですが、そのほとんどが豊富な制作実績を謳っています。しかし、“制作実績100社！”といってもその内訳のほ

nebos 2012/06/14

ウェブサイトリニューアル時に心掛けたい事を顧客目線で。

リンク

Webサイト制作の一連の流れをまとめてみました

Webサイト制作の一連の流れをまとめてみました。クライアント向けにまとめたものを少し手直ししてのせています。新人Web担当者さんや、新人ディレクターさんの参考になるかなと。なるべく難しい言葉を使わず、理解しやすいよう平易な言葉で書いております。 ※流れや手順は制作会社によって違うのですが、概要はつかめるかなと思います。目次と流れ 1. サイトのコンセプトを考える 2. 競合他社からクライアントのお店や商品を選んでもらうためのポイント（強み）を整理する 3. そのサイトで一番伝えたい内容を決める 4. お客さんが必要とする3以外の情報や、クライアントの伝えたい情報をまとめる 5. サイト更新は誰がするのかを決める 6. 想定使用デバイス（PCやスマートフォンなど）を決める 7. サイトの周知・宣伝方法を考える 8. ページの設計図をつくる 9. サイト制作にかかわる必要な素材を準備する

nebos 2012/05/28

提案～作成までを、改めておさらい。提案時の参考に。

リンク

Webデザインの評価項目をつくる

Webデザインの評価項目というのを、ディレクターやデザイナーの方々はつくっているでしょうか？評価項目があると、デザイナーやディレクターだけでなく、クライアントにとってもデザインの基準がわかりやすくなり、目標地点が明確になります。今までつくったことがなかったという方は、この機会につくってみてはどうでしょうか。改めて、Webデザインの評価項目をつくるメリットです。デザイナー、ディレクター、クライアントにとって、デザインを評価する共通認識を持つことができ、三者間で認識のブレが少なくなるデザインの優先すべき項目（もっと企業の色を出したい、など）がわかりやすくなり、それをデザインに反映させることができるデザイナーは、すでに満たされている要素にそれ以上時間をかけることがなくなり、足りない要素に注力できるデザインの評価項目とデザインエレメント一覧表私はWebデザインの評価項目を、以下のよ

nebos 2012/03/12

評価するうえでの指針。

リンク

http://akibahideki.com/blog/cat5/post-20.html

nebos 2011/10/07

リンク

求人サイト制作・構築システムの主要10社を徹底比較

主要サービス10社を徹底比較機能・コスパ・集客サポート３種の神器が揃った求人サイト構築サービスとは？必要な機能とは？コスパの良い条件とは？集客サポートはなぜ重要？人材派遣や紹介、採用支援など「人」を扱う企業が、「大手採用サイトに多額のコストを払うより、自社で採用サイトを運営したほうが効率的なのでは？」という考えから、求人サイトを構築・運営していこうという動きが増えてきました。もし貴社が人材を扱う事業を行われているなら、共感いただけるのではないでしょうか。求人サイトの立ち上げは、けして簡単ではありません。対象となる業界・ユーザー、競合、市場規模、収支、サイトの方向性といった戦略を立てたり、システム開発やサイト制作を依頼する会社を探したり、予算計画や運営方法、サイト公開後の集客プランを考えるなど、相当な労力がかかります。せっかく求人サイトを立ち上げるなら、誰もが失

nebos 2011/09/08

リンク

はてなブックマーク

タグ

関連タグで絞り込む (9)

ディレクションに関するnebosのブックマーク (17)

お知らせ

今週のはてなブックマーク数ランキング（2024年7月第1週）

月間はてなブックマーク数ランキング（2024年6月）

今週のはてなブックマーク数ランキング（2024年6月第5週）

公式Twitter

キーボードショートカット一覧

はてなブックマーク

公式Twitter

はてなのサービス