私たちの会社では長らく、画面設計といえばPowerPointを使い、ワイヤーフレーム（以下、WF）を作っていました。Web制作会社における非常にスタンダードなやり方であったため、ベターな方法と受け入れつつも、例えば以下のような無駄も多く、決してベストではないとも感じていました。 設計者がコーダーに文書構造の意図を説明する時間の無駄 設計者が考えたファイル構造やヘッダ情報を定義するためのドキュメントの無駄 コーディング時にWFやPSD上のテキストをコピペして移し替える無駄 リンク構造や動き、使い勝手を紙面上で表現しようとする努力の無駄 共通パーツに修正が入った時に各ページごとに修正を入れていく無駄 PC用とスマホ用の2種類のWFを作る無駄 更新するたびに新しいWFを印刷する紙の無駄 いずれも工夫次第で軽減できる問題でしたが、意思疎通のための中間成果物の体裁を整えるための多くの時間が無駄では？

Webサイトのデザインの方向性決めというのは、検討が長引いたり、スケジュールの遅れに繋がったりする要注意ポイントの一つです。弊社も例外ではありませんが、一方で、デザインに至った過程を丁寧に解説することで、スムーズに進めることは可能であるとも感じています。ここでは、デザインコンセプトを自然に理解していただくために弊社が行っている提案方法を共有しようと思います。 以下のスライドは、実際に使われたスライドです。公開用に細部は少し変えましたが、内容はほとんどそのままです。 クライアントは、株式会社マネジメントサービスセンター（以下、MSC）という企業の人事戦略や人材育成の支援を行っているB2B企業です。ターゲットは人事部や経営層などで、前段として戦略、設計が完了し、ベースとなるデザイン案を初めて提案する際に使ったものです。こちらを元に、ステップごとに細かな解説をします。（スライド中に出てくる検討プ

エイベックスさんとサイバーエージェントさんが立ち上げた音楽アプリAWAを使った感想と、サブスクリプション型音楽サービスに関する考察をまとめてみました。Spotifyをはじめとする他サービスは使ったことがないため、憶測含みなのはお許しください。 ちなみに私は、ダウンロードやレンタルCD、CD購入などで、20～30枚のアルバムを毎月入手しており、聴いているのはほぼ洋楽というリスナーです。なので、一般リスナーと使い方や感じ方が違っている部分が多々あると思います。その点は間引いて解釈いただけると幸いです。 テーマは以下の6つです。 曲数は十分か？ 良質なリスナー体験ができるか？ プレイリスト共有は楽しいか？ サブスクリプション型サービスの位置づけとは？ リスナーの分類 カスタマージャーニーと課題 曲数は十分か？ 現時点での曲数は公表されていませんが、2015年末までに500万曲揃えるということなの

スマートフォンの普及で、PCで閲覧するWebサイト（以下、PCサイト）に対する注目度は下がっています。しかし、BtoBのデジタルマーケティングにおいては、PCサイトが今後も戦略の中心になるでしょうし、BtoCにおいても、PCサイトが不可欠な領域もまだまだ多いです。 ハードウェア的に大きな変化のないPC向けのWebデザインというと、ノウハウは固定化されている印象もありますが、実際には時代の流れを受け、今も変化を続けています。特に以下のような環境変化が、PCサイトのUIデザインにも大きな影響を与えています。 表示デバイスの多用化 スマートフォンアプリの一般化 タッチスクリーンの普及 トレンドに合わせれば成功、というではありませんが、その根底に流れているユーザ動向の変化については、十分に理解しておく必要はあるでしょう。そこでこのエントリーでは、PCサイトのUIデザインにおける最新動向を、その背景

本エントリーは、以下の目次で構成されています。 2種類のハサミと2種類のWebデザイナー Webデザインの特殊性 ビジュアルのディテールに神が宿らないWebデザイン 美しいが使えないWebデザインをしてしまう理由 Webデザイナーを支配する「強固な固定観念」と「裏の動機」 美しいビジュアルの根底にあるデザインの本質 本当に「最近のWebデザインはつまらない」のか？ ミスマッチが生む不幸なWebデザイン Webデザイナーに求められる自らのスタンス Web制作会社にも求められる明確な価値観 2種類のハサミと2種類のWebデザイナー 例えば、以下のような2種類のハサミが存在するとします。 工芸品のように美しいが切れ味はよくないハサミ 見た目はそれなりだが非常によく切れるハサミ 1は、ハサミとしては売れないでしょう。ただ、それが刺激的で斬新なビジュアルであった場合には、特別な賞を取ったり、美術館に

2014年9月9日、アップルの新製品発表会が行われました。 人々の注目は、iPhone6とApple Watchだったと思いますが、Web制作者としてちょっとした驚きだったのは、発表と同時にWebサイトがスマートフォン対応したことです。 現在、多くの企業サイトで、スマートフォンからのアクセスが急増しています。スマートフォンユーザが直接的なターゲットとは考えにくい企業サイトでさえ、スマートフォンからのアクセスが3～4割を超えることが当たり前になってきました。 モバイルファーストという言葉も生まれ、スマートフォン対応をしているかどうかを、検索アルゴリズムの評価項目に加えているとGoogleが公言するほど、「スマートフォン対応＝正しいWebサイト」とさえいえるようなムードの中で、アップルだけは、頑なにWebサイトのスマートフォン対応を行なってきませんでした。 このアップルの選択は、「アップルでさ

先日、こんな記事がSNSでシェアされてきました。 エアロスミス「もうアルバムを作る意味がない」 確かに、ダウンロードやサブスクリプションが主流になると、アルバムという販売フォーマットは見直さないといけないかもしれません。これからの時代にアルバムをリリースする必要はあるのか、という点については、大いに議論の余地があると、私も思います。 ただ、私がこの記事で気になったのは、別のことでした。 ジョーイ・クレイマー（エアロスミスのドラム）はこの記事の中で、前作『Music From Another Dimension! （以下、Music From～）』の販売不振から、そのような考えに至ったと語っています。またSNS上では「あのエアロスミスでさえ、アルバムが売れない時代なのか」といった嘆き、あるいは市場変化に対するエアロスミスの判断の先見性を評価するものが多かったように思います。 しかし、私は、ジ

デバイスがどのように進化しようが、アプリの時代になろうが、ユーザビリティは変わらず求められるものです。Web/IT業界では「使いやすさ」という意味で気軽に使われる言葉ですが、奥は深く、原論を解説した書籍もいくつか出ています。 学術的な解説はそういった書籍に任せるとして、ここでは、経験の浅いデザイナー、あるいは非デザイナー（ディレクター、Web担当者、エンジニアなど）向けに、ユーザビリティの向上に繋がる基本的な要点をまとめてみました。 ボタン、テキスト、コピーなど ボタンやテキストのデザインは、ユーザビリティを左右する大きなポイントです。表面的な美観に流されず、ユーザ視点で考えていきましょう。 1：ボタンじゃない要素は、ボタンと似たデザインにしない ボタンのデザイン次第で、サイトやアプリの使いやすさは大きく変わります。特に、ボタンでない要素にボタンのようなデザインを施すことは、どこが押せるの

HTMLコーディングの初級というと、どの程度のスキルを差すのでしょうか。弊社では、以下のようなことがひとまずできていると、だいたい初級レベルを越え始めた段階かな、という気がしています。 ターゲットブラウザで大きな崩れがない。 リンク漏れや原稿違いなどのヒューマンエラーの頻度が極めて低い。 バリデーター・チェックでエラーが出ない。 逆に、これだけのことができて、なぜまだ初級レベルなのでしょうか。それは、現場では、これだけでは不十分だからです。ブラウザでひとまず正常に表示されるだけでなく、改修に素早く対応できる柔軟性、協業や運用後の更新を楽にするルールの一貫性や簡潔さ、HTMLの概念をきちんと踏まえた正しい構造設計なども、求められてくるからです。 そこでここでは、脱・初級者を目指す方のために、弊社内で行っているHTMLコーディングの、いわゆるエラーということ以外のチェックポイントを、まとめてみ

社内で話しをする際、説明をより分かりやすくするため、身近な漫画や映画、音楽、スポーツなどに例えることがあります。その中でも結構多いのがゲームです。特にRPGのゲームシステムは人生や仕事と重なるところが多く、よく引き合いに出します。 そんな例え話から派生して、RPGから学べる人生や仕事の教訓をまとめてみました。 ちなみに、今年41歳の私にとってのRPGというと、『夢幻の心臓』、『ブラックオニキス』、『ザナドゥ』、『ハイドライド』、『イース』、『ソーサリアン』、『クリムゾン』、『ゼリアード』、『XZR』、『ラストハルマゲドン』、『サーク』、『BURAI』、『エメラルドドラゴン』といった往年のPCゲームのイメージです（実はドラクエをやったことがない）。 なので、イマドキのRPGはこんなシステムじゃねーよ、というのがあるかもしれませんが、まぁそれは例え話ということで許してあげてください。 教訓1：

社会における存在意義を明確にしたり、ブランドイメージを確立する上で、企業メッセージというのは非常に重要な役割を担います。一方、多くの大企業のメッセージは抽象的であり、かつメッセージだけを消費者に届けることはなかなか難しいため、工夫を凝らしてビジュアルで表現し、テレビやWeb、紙媒体などで展開していたりします。 ここでは、そういった企業メッセージのビジュアル表現をいくつかピックアップし、そこにはどのような意図があるのだろうか、そしてクリエイターとしてはどういう点が参考にできるのだろうか、といったところを見ていこうと思います。 資生堂 資生堂のコーポレートメッセージは「一瞬も　一生も　美しく」。これは、2010年の映画公開にともなって展開された新聞広告のビジュアルです。 これは当時公開された映画『Flowers』の1シーンですが、ノスタルジックな白黒写真のトーンと伝統的な和装が、時代に流されな

私たちの会社は、ビジネス寄りで堅めの実績が多いうこともあって、BtoB系企業のお客さまからのお問い合わせが比較的多いです。また、私たち自身がBtoBビジネスをやっていて、webサイトを使った集客を実現していることから、実践的なノウハウを活かしたご提案がしやすい分野であるとも思っています。 そんな、私たちのBtoBサイトに関する豊富な経験から、今回は、よくあるBtoBサイトの失敗パターンをまとめてみました。多くの項目に当てはまるwebサイトは、是非これを機に、リニューアルを考えてみてください。 1.　新規顧客ではなく既存顧客向けに作るBtoBビジネスでは、売上げの大半を既存顧客から上げていることも多いです。だからといって、webサイトのターゲットを安易に既存顧客にしてはいけません。特に既存顧客対応は人的営業の役割で、webサイトでできることはあまりない場合、Webサイトは新規顧客の獲得を主目

Flash。Webクリエイティブの世界で一世を風靡したプラグイン。 最盛期は95%を超える圧倒的な普及率を誇り、数多くのWebサイトがFlashで作られました。特に広告賞を獲るようなWebサイトはほぼすべてがFlashで、デザイン性が高いWebサイト＝Flashサイトと評価されるような状況でした。 その勢いはやがて、携帯アプリを作成できるFlash Lite、デスクトップアプリが作れるAIRやFLEXのようなシステム系ソリューション、Flashをベースにした動画フォーマットのFLVなどに発展。スクリーン上のインターフェースはすべてFlashベースで作りましょうよ、という流れさえありました。 それからわずか数年。アップルがiPhoneやiPadの勢いのまま「Flashいらんやろ」の姿勢を貫いたため、あれだけ業界を席巻していたFlashも今や風前の灯。検索エンジンやアクセス解析に十分に対応しき

説得力。仕事をしていると求められるものです。 説得力のある会話。説得力のある資料。説得力のある論理。説得力さえ身に付ければ、仕事のほとんどはこなせちゃうんじゃないか、ってくらい強力なスキルです。 デザインも同じです。特にクライアントの存在する商業デザインには、「説得力のあるデザイン」が求められるものです。では、説得力のないデザインと、説得力のあるデザインとは、どこが違うのでしょうか？ 説得力のないデザインは、だいたい考察が浅かったりします。一方、説得力のあるデザインは、色々なことを深く、広く考察したうえで、最終的なデザインに到達しています。浅い考察、深い考察を、もう少し分かりやすくすると、以下のように表現できるでしょう。 ●浅い考察 → Aという要望があった → それに対して、Bと思った → だから、Xというデザインにした（結論） ●深い考察 → Aという要望があった → それに対して、B

iOS7の登場で、フラットデザインへの関心はますます高まっていることでしょう。 ここではそんなトレンドは一切無視して、UIデザインにおける立体表現を行う上で、おさえておくべき大切なポイントをまとめてみました。これらをマスターして、時代に逆行するゴリッゴリの立体表現を行えるようになりましょう。 セオリー１：現実世界の「光源」の基本ルールを守る 唐突ですが、この2つのボタン、立体表現としてどちらが正しいと思いますか？ 左側、「A」のボタンには、以下のような光源の矛盾があります。 ボタン本体の影は、右下に付いている。つまり、光源は左上。 へこんだAの影は、右上に付いている。つまり、光源は右上。 ドロップシャドウは、真下に付いている。つまり、光源は真上。 一方のBは、すべての要素の影が、光源が上の表現になっています。つまり、正解はBです。そしてこれが、現実世界での「光源」（＝影）の基本ルールです。