多様化する会員登録画面 色々なWebサービスの会員登録画面を、導線やSNS連携ボタンの配置を主軸に分類してみました。 各サービス、会員登録CVRを上げるために、導線や提示方法を工夫しています。また、SNS連携が必須になってきたことによって、画面に占める要素が増えてきており、その配置方法にも工夫がみられ面白いです。 ※キャプチャ取得タイミングの関係で、古いデザインもあるかもしれませんがご了承下さい。 ポップアップ提示パターン Sumallyやpixivは、Cookie制御がされており、初回訪問時にアグレッシブにポップアップを提示してきます。 Sumally pixiv Blabo!やAirbnbは、会員登録リンクを押すとポップアップで提示されます。 Blabo! Airbnb SNS連携ボタンが上に配置されているパターン 通常の会員登録への導線やフォームの上に、各種SNSのボタンが配置されて

Fitts’ Law ユーザーインターフェース設計における普遍的な法則。画面上で、マウスなどの入力装置を使ってものを指し示すときにかかる時間を計測するモデル。ターゲットオブジェクトのサイズと距離に基づき、以下の計算式で算出される。面積が大きく、現在のポインター位置から近いものほど、指し示しやすい。 T = a + b log2 (D/W + 1) T = ターゲットまでポインターを動かすのにかかる時間 D = ポインターとターゲットの中心までの距離 W = ターゲットの大きさ（ポインターから見た奥行き） a = ポインター移動の開始・停止時間（実験をもとにした定数） b = ポインターの速度（実験をもとにした定数） なお、通常、ポインターはスクリーンの端よりも外へは移動できないため、スクリーンの端にあるものは、その面積（ポインターから見た奥行き）に関わらず、容易に指し示すことができる。Ma

「カード」とは、画像やテキストなどの情報が書かれた下図のようなデザインのことをいいます。カードは、シンプルな使いやすさとデザイン性とのバランスを重視する際にはもっともよく使われる手法となりました。PinterestやFacebookのようなサービスで使われはじめ、現在では多岐にわたる企業で使用されています。

こんにちは、デザイナーのスライです。 初々しい新社会人の姿が眩しいです。。。 突然ですが、Webデザイナーのみなさんに質問です。 モバイルファーストを意識していますか？ モバイルファーストと聞くけど、作業環境はPC、見るサイトもPCサイト。 何となく、ふわふわした印象を持つWebデザイナーの方は多いと思います。 今回は、そんなモバイルファーストな設計に関連することを書こうと思います。 怒りのUI 第二回目「iOSヒューマンインターフェイスガイドラインから学ぶUI設計」です。 iOSヒューマンインターフェイスガイドラインとは 正式名称「iOS Human Interface Guidelines」は、 AppleがiOSアプリ開発者向けに公開しているガイドラインです。 モバイルファーストなUI設計を実現するためのヒントが、 このガイドラインに書かれています。 このコラムではWebデザインに関

「ちょっと〇〇君！これワイヤーフレームそのままじゃない！」 Webデザイナーなら、できることなら聞きたくないセリフですよね。私自身ももれなく、こう言われた経験はありますし、逆に後輩に対して同じく「これだとワイヤーフレームのまんますぎるね。。」と伝えたこともあります。 この「ワイヤーフレーム通り問題」は、Webデザイナーなら誰しも一度は経験するあるあるの一つと言えますが、なぜ「ワイヤーフレーム通り」と言われてしまうのでしょうか。また具体的に何をすれば、ワイヤーフレーム通りではなくなるのでしょうか。今回はそのあたりの原因と対処方法を考えてみたいと思います。 「ビジュアルを作る力」と「情報を理解・提案する力」 ズバリ結論を言いますが、ワイヤーフレーム通りじゃん…と言われてしまう人は「ビジュアルを作る力」と「情報を理解・提案する力」が弱いと言えます。 ビジュアルを作る力は幅広い表現の中から適切な手

Webサイトやアプリなど、UIデザインのアイデアを探す時に役立つサイトを紹介します。 さまざまなコンポーネントやレイアウト、インタラクションのヒントとなるアニメーション、動きがとにかく気持ちいいアニメーションなど、見ているだけでワクワクするクリエイティブな刺激をもらえます。

なんかすごい思い付きで www.adventar.org に参加してみたんですけども。 気づいたらいつの間にか自分の日になっていて面倒くさくなってきて激しく後悔したびっくりしたという。 ぼくはWebディレクターでありデザイナーさんではないし、すてきデザインができるようなビジュアルセンスのようなものは、誠に残念ながら母上から授けられずにこの世に生を受けているものですから、"いわゆる"デザインはやらないんですが、その前の画面設計についてはワイヤーフレームなるものでいっつもやっておりますので、その観点からなんか書きましょうとそういうことですお母様（謎） そんなわけで、うぇぶぎょうかいのむめいでぃれくたーのお時間です。 Webディレクターとしてはえーと、もうすぐ丸１２年になります。そうするとまあ、たぶん数千ページは「ワイヤーフレーム」をつくってきたんじゃないかと思います。正確な数字はわかんないです

こんにちは！ いつも元気ハツラツ・天真爛漫・平成生まれゆとり世代、のんちゃんです。 わたしは中学2年生の頃から携帯電話なるものを使用し、友達とコミュニケーションをとっていました。ちなみにPCは小学4年生くらいから夢中に触っていて、親に電源抜かれたこともありましたねぇ。 ガラケーからスマホにしたのは5年前の大学1年生の時だったと思います。最初はAndroidでしたが、その後はずっとiPhoneです。 昔のiPhoneであろうとも、いまの充電器があればカメラロールとかメールとかを見返せるのがおもしろくて、実家に帰ってとてつもなく暇な時は、ひとりでそういった遊びをしています。 ちなみにすごくどうでもいいのですが、わたしはiPhoneを変更しても、あえて写真とかは引き継いで移行させません。 思い出は、そっと大事に眠らせておきたいのです。 さて、前置きが長くなりましたが、過去のiPhoneを漁ってい

2015年5月、スマートフォンによるGoogleの検索数がPCでの検索数を抜いたというニュースがGoogleの公式ブログで発表されました。昨今の私たちは多くの情報をスマートフォンで検索しています。その流れに伴って、現在は多くの企業がスマートフォン用に最適化されたWebサイトを持つようになりました。 我々Web制作者はこの流れの初頭、PCサイト制作で培ったノウハウを元に、手探り状態で制作していたのを記憶していますが、この数年の間で一定の制作ノウハウが蓄積されてきたように思います。 しかしデバイスが多様な進化を遂げる中で、スマートフォンサイトのUI作法も日々刻々と変化し続けています。私たちWeb制作者は一定のノウハウを使い回すことに固執せず、常に新しい動向を自分の目でキャッチして知識を刷新し、日々の業務にフィードバックさせる活動が大切です。 というわけで少々前置きが長くなりましたが、今回は昨今

6月22日、グーグルは地図サービス「Googleマップ」に、業種の翻訳情報が追加した。実はこの機能、日本が中心的な役割を果たす形で開発されたものだ。開発を担当した、ソフトウエアエンジニアの須之内 雄司さんとハーマン シェレメティエフさん、そして、マップ全体の開発を統括している、シニア エンジニアリング マネージャーの後藤正徳さんに話を聞いた。 日本語が読めない人にも「街歩き」を！ Googleマップでは、地図上のポイント情報も翻訳対象になっている。例えば、道の名前や駅の名前、有名な観光地などは「自分が設定した言語」で表示されるのが基本だ。 しかし、すべての地点の翻訳が終わったわけではない。 「翻訳が終わっていない部分も、カテゴリーだけでも翻訳し、ぱっと見で旅行者にわかるようにできないか、という発想で進めました」、須之内さんはそう語る。だが、言葉だけだとよくわからない。 「自分がロシア語の地

ユーザファーストと聞いて、何を思い浮かべるだろうか？よく、ユーザの声をしっかり聞いていないからユーザファーストではないとか、顧客第一ではない、なんて話を聞くけど、それは全くのナンセンスだ。 ユーザは自分のほしいモノはわかっていないし、無責任まず大前提として、ユーザは自分がほしいものは分かっていない。いくらグループインタビューを重ねても、そこからipodは生まれなかっただろうし、Appleもユーザヒアリングはしないことで有名だ。それから、ユーザに「このボタンの位置についてどう思いますか？」と問われれば、「そうですね、もっと右にあったほうがいいと思います」と、意見を言わないと！いう善意から、責任も伴わない思いつきの意見をどんどんいう。だから、ユーザに「どう思うか」と聞くのは愚の骨頂だ。 長期的視点と短期的視点それから、ユーザファーストという時に、それはユーザにとって短期的にいいものか、長期的に

最近、デザイナーに求められるスキルが多くて何を学べば良いかわからなくなってきた。と言う声を聞くようになってきた。 流行りの記事にいくつか目を通すと、デザイナーは「 経営者と対等に話せるコミュニケーション能力、ビジネスセンスを保有していて、イケてるグラフィックを作り、コードまでかけないといけない 」らしい。 スキルを多く保有している方が望ましいのは間違いない。 ただ、 現場デザイナー に最も大事なのは実装面での考慮事項が網羅されて考え込まれた「 決定力のあるデザイン 」を作る力だと思う。 サッカーで言うと、決定力は「 得点を決める能力 」として使われているけど、UIデザインにおいては「 実装面まで考慮された実装可能なデザインであるか 」という言葉として使っている。 魅せるデザインとフィージビリティが考慮されているデザインでは、かなり内容が異なってくるので、現場デザイナーとしては特にこのあたり

僕がWeb業界に飛び込んでから一年が経つ。 フロントエンドの端くれとして、今年はデザインについても勉強したい。 あいにく僕は美的センスが完全に破綻している。 せめてUXに関する力を付けるべく、最近それらしい本を読み漁ってる。 そのうち一冊が「さよなら、インターフェース」だった。 さよなら、インタフェース -脱「画面」の思考法 作者: ゴールデン・クリシュナ,武舎るみ,武舎広幸出版社/メーカー: ビー・エヌ・エヌ新社発売日: 2015/09/17メディア: 単行本（ソフトカバー）この商品を含むブログ (5件) を見る 概要 The best interface is no interface | Cooper Journal 去年9月発売の本書は、↑のブログ記事に加筆修正を加えたものだ。 元のタイトルは "The best interface is no interface" 。 タイトルの

UIの改善はデプロイがスタートライン --このような施策の検証は、どのようなスピード感で行っているのでしょうか。 UI改善の目標設定は、半期の大きな目標をブレイクダウンして各プロジェクトのミッションにしており、評価は定性（投稿の質を高める）、定量（投稿数を増やす）のバランスを取りながら行っています。 場合によっては、投稿数は増えているが投稿の質が担保できていないという理由で、改善したUIのチューニングやロールバックをすることもあります。Rettyでは1日1回デプロイのタイミングを設けており、実装したUI改善プロジェクトのチューニングは、たとえば表示している文言の内容なども含めて細かくリアルタイムに行っています。 ちなみに、スマートフォンアプリは更新の申請から公開まで2週間以上掛かると言われていますが、Rettyのアプリではサーバから情報を読み出す「WebView」にしているので、コンテンツ