事例や仕組みを分かりやすく解説！P2P（ピアツーピア）とは

初心者向けにP2P（ピアツーピア）の仕組みや事例について分かりやすく解説しています。ブロックチェーン技術を理解する上で欠かせない通信技術で多くのWebサービスでも使われています。システム開発を行わない人でも知っておいて損はないでしょう。

テックアカデミーマガジンは受講者数No.1のプログラミングスクール「テックアカデミー」が運営。初心者向けにプロが解説した記事を公開中。現役エンジニアの方はこちらをご覧ください。 ※ アンケートモニター提供元：GMOリサーチ株式会社　調査期間：2021年8月12日～8月16日　調査対象：2020年8月以降にプログラミングスクールを受講した18～80歳の男女1,000名　調査手法：インターネット調査

今回は、P2P（ピアツーピア）について解説します。

通信技術の話の中で「P2P」という用語を聞いてよく分からないという人も多いでしょう。この記事では、P2Pがどういった仕組みで実際どんなサービスで使われているのかまとめています。

ブロックチェーン技術を理解する上でも知っておきたい知識の一つでしょう。

今回はP2Pについて説明しよう。

田島メンター！P2Pとはどういったものなんですか〜？

peer-to-peerの略で、peer(同等の立場)同士で通信をすることを指すんだ。具体的に見ていこう。

はい！

P2Pとは

P2Pとは、peer-to-peerの略で、P2Pネットワークとも呼ばれます。

一般的なインターネットは、サーバーで処理された内容をクライアントから利用する通信を行っています。

サーバーというのは、インターネット上にある、プログラムが動作している性能の良いパソコンというイメージです。

クライアントとは、お手元のパソコンやスマホの事です。

P2Pでは、サーバーとクライアントをいう関係ではなく、クライアント同士が繋がることで処理を行っています。

P2Pであるメリット

ゼロダウンタイムの実現

ダウンタイムとは、サーバーとクライアントで構成されるシステムで、サーバーが停止することでシステム全体が停止する事を意味します。

サーバーが停止して、システムが動作しなくなる事は珍しいことではありません。

P2Pにより、クライアント同士が分散して繋がることで、どれか一つのクライアントが停止しても、全体としてのシステムがダウンすることが無い、ゼロダウンタイムが実現します。

このP2P技術をりようして、ビットコインやアルトコインがブロックチェーンにより稼働しているため、ゼロダウンタイムを実現した、安定運用が可能になっています。

P2Pの特徴とそのメリットについてだよ。

クライアントとサーバーでやりとりする部分を、クライアント同士で行うという形なんですね。

[PR] 無料で現役エンジニアから学べる

P2Pであるデメリット

セキュリティリスク

P2Pを利用したサービスの中でファイル交換を行う事ができるソフトの場合、ウィルスが混入したファイルを受け取ってしまうリスクがあります。

同じように、自分の端末内から重要なデータが流出することもありえます。過去、ファイル交換ソフトを利用して企業や官庁の重要データや、私的な写真や動画が流出してしまう事件が多発しました。

また、P2Pは管理者不在で接続端末同士が相互にデータのやり取りを行う事で成立しています。その為、重要データが流出した際、それを食い止める手段が存在しない事が大きなリスクとなっています。

次に、P2Pを用いた実在サービスの例を見てみよう。

P2Pサービスの実例

Skype

世界中の人と文字・音声・ビデオチャットを無料で利用することができます。

ユーザー同士がP2Pで接続することで、それまで電話を利用して高い費用が必要だった機能が、無料になったということです。

Skype

μTorrent

μTorrentとはユーザー同士でP2P技術を利用したファイル交換ソフトです。

違法ファイルの交換が問題になっていますが、本来は著作権上ダウンロード可能な大容量ファイルを、サーバー負荷をなくしてダウンロードする事を目的としています。

例えば、1GBの容量があるゲームソフトプログラムを、公式サーバーからダウンロードすると、ゲーム会社は1ユーザー当たり1GBのネットワーク帯域を消費します。

これに対し、Torrentで既存のユーザー間でゲームソフトプログラムを共有してもらうことで、ダウンロードサーバーへの負荷を限りなくゼロにすることが可能です。

μTorrent

ユーザー同士で通信を行うサービスの一例だよ。

SkypeもP2Pだったんですね。

P2Pはブロックチェーンにも関わってくる技術なので、全体のイメージを把握しておこう。

わかりました。ありがとうございます！

コラム

コスパとタイパ、両方結果的に良くなる良くなる学び方とは？

「スクールは高いし時間も縛られて効率が悪い」と考える方は多いと思います。
もちろん、時間も費用もかかることは間違いありません。
ただ結果的に無駄な学びにお金も時間もかける方がリスクが高いという考えもあります。

コスパ・タイパ最適化の参考として、テックアカデミー卒業生がスクールを選んだ理由をご紹介します。

・困ったときに、質問や相談できる相手がいるため挫折しなかった
・プロとして必要なスキルのみを深く学べたので無駄がなかった
・副業案件の提供と納品までのサポートがあったので目的を達成できた

安価・短期間で広く浅く学んでも意味がありません。本当に自分の目的が達成できるか、それが重要です。
自分にどのスキルや学び方が合っているか、どんな学習方法かなど、お気軽に無料相談に参加してみませんか？

カウンセラー・現役のプロへ、何でも気軽に無料相談可能。 30分か60分お好きな時間が選べて、かつ3回まですべて無料でご利用できます。
無理な勧誘は一切ないので、お気軽にご参加ください。

今なら相談した方限定の割引・参加特典付き！無料相談はこちら

暗号通貨におけるP2Pの役割

ビットコインにおけるp2pのネットワーク構造は、ファイル交換ソフトのそれと類似しています。

ビットコインのネットワーク上での参加者はノードと呼ばれ、ユーザーとマイナーに分かれます。

ユーザーとはビットコインを送信したり受信したりします。

マイナーはハッシュ値を計算しブロックを生成することで報酬としてビットコインを獲得します。

マイニングの記事も合わせて参考にしてみてください。

ユーザーがトランザクションを発行し、それをマイナーがマイニングすることで、トランザクションデータが分散台帳に書き込まれます。

この過程で、p2pの複数のノードを経由する事で、マイニングや分散台帳への書き込みを行う事ができる点が、暗号通貨におけるp2pの役割です。

暗号通貨におけるP2Pの仕組

ユーザーAがユーザーBに1BTC（ビットコイン）を送金する場合

1. ユーザーAがトランザクションデータを発行する

トランザクションデータ

送金者：ユーザーA
受金者：ユーザーB
送金額：1BTC

2. マイナーがマイニングを行う

p2pネットワークを利用し、ユーザーAノードに隣接しているノードを通じて、各ノードにトランザクションが伝わります。

その中で、マイナーはマイニングを行います。

マイニングに成功した最初のマイナーが、今回のトランザクションデータを含む新たなブロックを生成します。

3. 分散台帳へ記録

成功したマイナーは自信が保有する分散台帳へ新たなブロックを記録します。

この記録自体も、p2pネットワークを通じて各ノードに共有されます。

今回は、P2P（ピアツーピア）について解説しました。

ブロックチェーンを支える通信技術でもあり他にも多くのサービスで活用されているので、ぜひ知っておきましょう。

ブロックチェーンとは何か詳しく解説した記事も合わせてご覧ください。

この記事を監修してくれた方

中本賢吾（なかもとけんご）
アジマッチ有限会社　代表取締役社長

開発実績：PHPフレームワークを利用した会員制SNS・ネットショップ構築、AWSや専用サーバー下でLinuxを使用したセキュアな環境構築、人工知能を利用したシステム開発、店舗検索スマホアプリ開発など。

その他にも地域の職業プログラマー育成活動を行い、2018年には小学生がUnityで開発したオリジナルAndroidアプリをGooglePlayでリリース。ゲームで遊ぶより作ろうぜ！を合言葉に、小学生でも起業できる技術力を育成可能で有ることを証明し続けている。

プログラミングを独学で学習していて、このように感じた経験はないでしょうか？

・調べてもほしい情報が見つからない
・独学のスキルが実際の業務で通用するのか不安
・目標への学習プランがわからず、迷子になりそう

テックアカデミーでは、このような学習に不安を抱えている方へ、マンツーマンで相談できる機会を無料で提供しています。
30分間、オンラインでどんなことでも質問し放題です。

「受けてよかった」と感じていただけるようカウンセラーやエンジニア・デザイナーがあなたの相談に真摯に向き合います。

「自分に合っているか診断してほしい」
「漠然としているが話を聞いてみたい」
こんなささいな悩みでも大丈夫です。

無理な勧誘は一切ありませんので、まずはお気軽にご参加ください。
※体験用のカリキュラムも無料で配布いたします。（1週間限定）

今なら参加者限定の割引特典付き！無料相談を予約する

Solidityにあるviewとpure修飾子の使い方【初心者向け】

Solidityのviewとpureの使い方について解説しています。それぞれの修飾子について説明しているので、Solidityを使った実装を行う上でぜひ...

ブロックチェーン

基礎から学べる！仮想通貨やブロックチェーン技術が学べるおすすめの本10選

ビットコインをはじめとする仮想通貨やブロックチェーン技術を学ぶ上で役立つ本を紹介しています。仮想通貨を理解する上で知っておくべきブロックチェーン技術につ...

ブロックチェーン

仕組みを理解しよう！PoW（プルーフ・オブ・ワーク）とは

今回は、PoW（プルーフ・オブ・ワーク）とは何か解説します。ビットコインやブロックチェーンを支える技術として覚えておきたいキーワードでしょう。具体的にど...

ブロックチェーン

有名なトークンやメリットを紹介！Ethereumの「ERC20」とは

今回は、ERC20について解説します。イーサリアムベースのトークンで、すでに動いているサービスでも使われています。ERC20を使うメリットや代表的なトー...

ブロックチェーン

新しい資金調達の方法！ICO（クラウドセール）とは【仮想通貨業界で話題】

今回は、ICOについて解説します。今までにない資金調達の方法として話題になり2017年には様々なICOプロジェクトが生まれました。仮想通貨を持っている人...

ブロックチェーン

特徴について解説！分散型アプリケーション（DApps）とは【初心者向け】

今回は、分散型アプリケーション（DApps）について解説します。分散型アプリケーションとはどんな特徴があるのか、メリット・デメリットなども説明しているの...

ブロックチェーン

あわせてよく読まれている記事

ほとんどのデザイナーが気付いていない「UXの4つの間違い」とは

本稿は、Webdesigner Depotのブログ記事を了解を得て日本語翻訳し掲載した記事になります。本記事は、HooktoWin.comの共同設立者であるAndrew McDermott氏によって投稿されました。デザイナーは不可能を可能にすることを期待されます。信じられないほど複雑なプロセスを、シンプルで美しいものに作り変えるよう求められることも、何度もあるかもしれません。そして成功したときには、ロックスターになったような気分を味わえるでしょう。しかし、こうした大きな期待に応えられなかったときには、ひどく落ち込むかもしれません。デザイナーには完璧主義者の人が多く、自分自身が自分に対する最悪の批評家であることもよくあります。間違いを自分の責任と見なして、全てを台無しにしてしまったかのように思うこともあります。それでも、落胆するような状況において間違いを受け入れることで、これを成長と学びの機会とすることができるはずです。もし本当のことをお伝えするとしたら…… デザイナーが気づいていない真実：間違いのほとんどは、デザイナーの責任ではありません。辛い現実：いずれにしても、デザイナーは責任を負うことになります。デザイナーに不足しているのは、人についての知識新規の仕事やプロジェクトにおける、デザイナーの目標設定の仕方が、間違いの原因というわけではありません。ほとんどの場合、実際はその逆です。デザイナーは、多くの人が気にしないような細部のデザインまで、こだわりを持って熱心に取り組みます。神は細部に宿ることを知っているからです。問題となるのは、人についての知識が不足しがちなことです。これは、デザイナーが学校で教えられないことですが、仕事に大きな影響を与えます。もしデザイナーが正規の（または非正規の）教育を受けていれば、その過程で自分独自のデザインを究めることを求められます。また、デザインの原則、デザインと配色の関係、色彩なども学びます。しかし、これだけでは十分ではありません。デザインや美術について教育を受けることはあっても、人について深く学ぶ機会はありません。こうした理解不足は、デザインに影響し、ひいては予期しないUXの間違いの原因となります。デザイナーに不足しているのは、人についての知識なのです。 UXの間違い1：ユーザーが実際以上に多くを知っていると思い込むことデザイナーは合理的な人々です。インターフェースの設計に多くの時間を費やすため、デザインがWeb上でどのように機能するかを直感的に理解しています。「これは常識だ！」とデザイナー自身が思っていても、実際はそうではないこともあります。デザイナーにとっての常識が、ユーザーにも通用するとは限りません。デザイナーは設計に多くの時間を費やしているために、よく知っているだけなのです。また、デザイナーがプロフェッショナルであるのに対して、ユーザーが同等の専門性を備えていないこともあります。こうした理由から、ユーザーに対して次のように仮定するのは、間違いです。適切な質問を選ぶことができる設定の操作について理解しているアイコン、マーク、ロゴの意味を知っているコンテンツに意識を集中し続けることができる Webサイトで提供している指示をよく読んでそれに従う必要とするコンテンツの見つけ方を知っている問題の核心が見えてきたでしょうか？デザイナーがこのように仮定すること自体は合理的ですが、問題を引き起こすおそれがあります。なぜなら、こうした仮定は現実に基づいたものではないからです。利用方法が全く分からないユーザーもいますユーザーの中には設定の操作が初めてという人もいますあなたの設計したサイトを、乱雑で混乱するようなデザインだと思うユーザーもいます関心が他に向いているマルチタスク型のユーザーは、コンテンツに集中するほど時間がありません指示に従うのを拒むユーザーもいますほとんどのユーザーは、見ているコンテンツについて詳しく知っていませんこうした場面でデザイナーに求められる仕事は、「迷える羊の群れを、頭数を減らして束ねる」ことです。条件に合うユーザーだけを選び抜き、意図したプロセス通りに彼らがサイトを利用できるような設計にします。その他の条件に合わないユーザーは、除外します。 UXの間違い2：ユーザーのためのデザイン「ユーザーのためのデザイン」は、ここ数年で繰り返し提言されているアドバイスで、頭にたたき込まれているデザイナーも多いかもしれません。デザイナーは、ユーザーのニーズをよく理解して、ユーザーを中心にデザインするよう教えられています。しかし、このアドバイスには見落としている点があります。「なぜ？」と不思議に思うかもしれません。見境なく教え込まれているアドバイスですから。その見落としている点とは、必ずしも全てのユーザーがターゲット・オーディエンス（Target audience：広告やマーケティングにおいて、目標とする顧客）と一致するとは限らないことです。サイトを利用しているユーザーが、「求めているユーザー」像と一致しないことがあるのです。例として、Googleを考えてみましょう。 Googleは、そのエネルギーや注意の大半をユーザーに向けています。Googleにとってのユーザーとは、検索者です。検索者により良いユーザー体験を提供するために、多くの時間と巨額の資金を投資しているのです。しかし、検索者がGoogleの唯一のユーザーでしょうか？実は、その他にもGoogleのユーザーは存在しています。広告主：Googleは広告主が自らの命令に従うことをよく知っています。Googleは、広告主やサイト運営者に対してポリシーを公開しています。もし彼らがGoogleのポリシーに違反して、好き勝手に利用するとしたら、広告掲載やサイトは強制停止されます。ボット（クローラ）：Googleは、ボットなどによってサイト上で「通常以上のトラフィックが検出」された場合に、これをブロックします。検索している主体が人間でも、誤検知（False positive）によりブロックされてしまうこともよくあります。詐欺者：Googleは詐欺サイトもブロックしています。例えば、偽のダウンロードボタンをクリックすると、ランサムウェア（ransomeware）がコンピュータにインストールされるよう仕組んであるサイトなどです。検索者：Googleの検索エンジンの利用者です。このユーザーたちこそGoogleに利益をもたらしています。彼らが広告をクリックしたり、アプリケーションを利用したり、ソフトウェアをダウンロードすることで、Googleに収益が発生する仕組みになっています。 Googleは、自らの目標や利益に反するユーザーに対しては、ユーザーエクスペリエンスの提供を拒否しているのです。 Googleは、ほとんど全てのユーザーに提供されていますが、Googleのユーザーリストに載っていない人々（ボット）は締め出されます。広告主が検索者にスパムを送信するとしたら、広告掲載を強制停止されます。Googleは、自らの目標や利益に反するユーザーに対しては、提供を拒否しているのです。「ユーザーのためのデザイン」は、デザイナーがターゲット・オーディエンスだけに意識を向けるという前提があってこそ有益なアドバイスになることは、十分理解できるかと思います。しかし、多くのデザイナーがユーザーについて見落としている重要な点は他にもあります。それは次の「UXの間違い3」で述べるとしましょう。 [PR] 無料で現役エンジニアから学べるUXの間違い3：フリクションが不十分であること Webデザインにおける「フリクション（friction）」とは、Webサイト（のレイアウトに使われている要素）の利用を阻害することを意味します。一般にデザイナーたちは、フリクションを悪いものだと考えています。Webサイトを上手く設計しなければ、意図した通りにユーザーが行動しないおそれもあります。こうしたイメージから、デザイナーはフリクションを恐れがちです。しかし、全てのWebサイトにはフリクションが必要です。もし音楽を聴いていて、うるさいと感じたらどうしますか？おそらく音量を下げますね？同じことがフリクションにも当てはまります。ユーザーは音楽に、フリクションは音量調節のダイヤルに、それぞれ例えることができます。望ましいユーザーだけをWebサイトに集めるために、いわばフリクションというダイヤルで、音量を上げたり下げたり調整するのです。フリクションを活用しているWebサイトの例を、次にいくつかご紹介します。 Craigslist（クレイグズリスト）：Craigslistは、同じ広告を50回連続で投稿されたりするのを嫌がります。そのため、Ghostingという技術によってフリクションを生み出しています。ユーザーがスパムを送信したり、広告を過度に多数回投稿した場合には、広告はブロックされて誰にも見えないように非表示になります。 Google：Googleはユーザーに自らのポリシーを尊重してもらいたいようです。もしサイトを悪用したり、検索結果を利用してWebスクレイピング（Web scraping）を行えば、「通常と異なる」ユーザーとして検出されます。さらに警告を無視するとブロックされます。 Quora：Q&Aのサイトです。利用ガイドラインはシンプルで、「Be nice, be respectful.（マナーと節度をもって利用すること）」というポリシーを掲げています。このポリシーを無視するユーザーには警告を与え、ブロックまたは利用禁止にします。フリクションを利用することで、他のユーザーにとって安全なサイトであることを保証しているのです。Quoraのサイトのシステムは、ユーザー体験の質を最大限に高めるようにデザインされています。デザイナーにとってフリクションは、問題となるかもしれません。しかしそれはデザイナーが、フリクションというダイヤルを調整する方法を知らなかったり、またはフリクションが存在すること自体知らないからです。デザイナーのフリクションに対する理解が不足していると、フリクションに過剰反応してしまったり、皮肉なことに望ましくないユーザーにWebサイトを悪用されることも起こり得ます。では、フリクションを具体的に実装するとしたら、どのようになるのでしょうか？例を見てみましょう。問い合わせフォームに、キャプチャを3～4つほど複数設けて、人間であることを判別する利用に至るまでのステップ数を必要以上に増やすことで、ユーザーをふるいにかける文字で埋め尽くされたページ、またはデザイン要素がぎっしりと並んだページにする入力フォームを必要以上に多く設置することで、ユーザーを疲労させ、興味を失わせる（逆に入力フォームを十分に設置しないとしたら、全てのユーザーのアクセスを容易にすることになります。）コンテンツと関連性の低いストックフォトや画像を使うことで、ユーザーがコンテンツの意味を理解する妨げとするユーザーに個人情報や支払い情報の入力を求める一方で、サイト運営者の顔写真や個人情報などは可能な限り非公開にしておくフリクションは重要な設計であり、その形やサイズは様々ですが、多くのデザイナーが理解に苦戦するのは確かです。 UXの間違い4：上司の指示にいつも忠実であることこの間違いを回避するには勇気を要します。それに加えて、さらに重要なことですが、目標を明確に理解していることも必要です。現在デザインしている要素は、どのような完成形が望ましいのか、開発しているWebサイトの目標は何なのかなどです。目標に関するこうした質問にクリアで決定的な答えを出しておくことは、必須ですその理由は、あなたの上司、会社の役員会、クライアント、関係責任者から、目標に反する要求をされることがあるからです。相手の要求通りに進めたら良い結果は生まれないと、経験から予測できることもあるかもしれません。当初の目標に反して進めた結果、失敗プロジェクトとなるおそれもあります。もっとも、「指示通りに仕事をこなしてさえいれば、彼らは報酬を支払ってくれるから構わない。」という考えで、上司に協調するのは簡単ですが。自分の意見を声に出して伝えることが非常に重要です上司が自分自身のために行動しない場合には、あなたが上司に代わって行動することが重要です。もし上司が、彼ら自身の利益を損なうような指示を出してきたら、あなたの意見を声に出して伝えましょう。悪いニュースを伝えるべき場面です。上司に彼ら自身が犯そうとしている間違いを理解してもらうためです。もし自分の意見を声に出して伝えないことが習慣化したら、平凡なポートフォリオしか生まれないほとんどのデザイナーは自分の意見をはっきりと伝えることはありません。仕事を失ったり、キャリアに傷が付くのを恐れているからです。しかし、そのことが逆にこうした事態を招く原因となります。この間違いに対処する手立てが何もない場合にはデザイナーとしてチームに参加したときに、計画やデザインがすでに決定されていた場合にはどうするべきでしょうか？まずチームの他のメンバーと話し合いを持ちましょう。そして自分の意見をサポートする根拠（例えば、リサーチ、レポート、データなど）を十分に用意した上で、プロジェクトの責任者に意見を伝えましょう。最初は不可能に思えるかもしれませんが、実際には行うことは可能です。小さなステップから始めて、段階を追ってゆっくりと進めてみましょう。あなたはデザイナーとしてプロフェッショナルです。デザインツールを活用すれば、他の人が見逃してしまうようなUXの間違いを見つけることもできると思います。間違いを正すことで、複雑なプロセスを、シンプルで美しいものへと作り変えることができるでしょう。 [お知らせ]TechAcademyでは初心者でもUI/UXデザインができるようになるUI/UXデザインオンラインブートキャンプを開催しています。現役UI/UXデザイナーのサポートで学びたい場合はご参加ください。プログラミングを独学で学習していて、このように感じた経験はないでしょうか？・調べてもほしい情報が見つからない・独学のスキルが実際の業務で通用するのか不安・目標への学習プランがわからず、迷子になりそうテックアカデミーでは、このような

アプリデザイン

無限スクロールの課題とは！スクロールが長いサイトのデザイン手法

本稿は、Smashing magazineのブログ記事を許可を得て日本語翻訳し掲載した記事になります。本記事は、UXデザイナーのNick Babich氏によって投稿されました。縦長で無限にスクロールするWebサイトが最近一般的になってきています。ロングスクロールを使うと、ユーザーはページをスクロールするだけで大量のコンテンツを閲覧することができるようになります。無限スクロールはFacebook・Twitterなどのフィードで見られる、エンドレスなスクロールの手法です。ロングスクロールには次のような利点があります。ユーザーをより引き込むことができます。スクロールを利用することで、目的のために必要な操作を最小限に抑えることができます。「次へ」をクリックする必要がないというメリットによって、ユーザーは次のページに移動する変化を気にすることなくコンテンツに没頭することができます。モバイルデバイスにうまく変換されます。ロングスクロール技術の普及の背景には、モバイル画面がよく使われるようになったということが大きく関わっています。画面が小さいほどスクロールの頻度は増えます。モバイルデバイスのジェスチャーコントロールによって、スクロールは直感的で楽しいものになります。しかし、このやり方には欠点がないわけではありません。デザイナーはコンテンツとナビゲーションにしっかりと注意を払う必要があります。この記事ではロングスクロールにおいてのいくつかの利点、考慮すべき点、それと簡単なヒントについて解説します。どのようなときにロングスクロールを利用するかロングスクロールはすべてのWebサイトに使われるわけではありません。次のような場合にふさわしいでしょう。ストーリーテリング(ストーリーテラーのために線型構造を作り出す) 長い記事や複数のステップによるチュートリアルなど、連続した長いコンテンツ(複数のページに分割するよりもユーザーエクスペリエンスが向上する) コンテンツを別々のパーツに分割できず、全体として提示する必要がある場合(インフォグラフィックなど) 製品の機能・品質・特質を物語形式で見せたいときどのようにロングスクロールを実装するか次の10のルールが、ロングスクロールによいユーザーエクスペリエンスをもたらすのに役立ちます。 1. ユーザーにスクロールを促すページが表示されるとすぐにユーザーはスクロールを開始しますが、サイト上部のコンテンツは依然として重要です。訪問者の最初の印象と品質に関する予想は、ページ上部の内容で決まります。ユーザーがページをスクロールするのは、サイトの上部に表示されているのが期待できるものである場合だけです。なので、最も魅力的なコンテンツを置きましょう。良い導入部・前書きを提示しましょう。(コンテンツの状況をはっきりさせて、ユーザーに「このページがどういうものであるか」ということを分かってもらうことができます) 魅力的な画像を使いましょう。(そのサイトに関連する情報を含む画像は、ユーザーの注意を引きつけます) 2. ナビゲーションオプションを常に保持するロングスクロールのWebサイトを作成する場合、ユーザーは現在の位置とナビゲーションを把握したいと思っていることを忘れないでください。ロングスクロールではナビゲーションに関する問題が起こることがあります。ページをスクロールしたときにナビゲーションバーが表示されなくなった場合、下の方までスクロールしていたのに一番上まで戻らなければいけなくなったりします。こういう問題に対しての解決策として、常に一貫した場所に表示され続けるメニューがあります。モバイルデバイスの場合：モバイル画面は他のデバイスよりも小さいため、ナビゲーションバーが画面の大部分を占めることがあります。ユーザーがコンテンツを見るためにスクロールしているときはナビゲーションバーを隠して、トップに戻るために画面を引き下げたときに表示させるとよいでしょう。ヒント：追加のナビゲーションを使用して、ページ内の各セクションの間をジャンプさせることもできます。以下のアニメーションの場合、ユーザーは自分の進行状況を確認することができると同時に特定のセクションへのショートカットとしてこれを利用することができます。 3.「戻る」ボタンが適切に動作することを確認するロングスクロールのサイトでは、ユーザーが自分のページ上の位置を見失うことがよくあります。ロングスクロールのリストからクリックして該当のページに行ったあと「戻る」ボタンを押したとき、元いた場所でなくページの一番上に戻ってしまうというような形です。そうすると、一度見たコンテンツをまたスクロールしなければいけなくなります。適切な場所に戻れないことで、当然ユーザーは不満を感じるでしょう。フィード内の要素をアクティブにしたあと、元いたところにきちんと戻れるようにしておく必要があります。Flickrの「戻る」ボタンはこのような機能についての良い例です。スクロール位置が記憶されており、「戻る」ボタンを押すと元の場所に戻ることができます。 4. スクロール位置に基づいてURLを変更するロングスクロールの一般的な問題のひとつとして、ページ上の特定の場所へのURLによる共有ができないという点があります。スクロール位置はURLに反映されず、そのページの先頭に繋がります。 URLが現在の位置を捉えないので、ユーザーは画面を簡単に切り替えることができなくなり苛立つことになります。 HTML5からは、history.pushState()関数を使うことで、ページをリロードすることなくブラウザに表示されるURLを変更することが可能になっています。 5. ページ内ジャンプ機能を使用するロングスクロールのもうひとつの共通の問題は、方向感覚がなくなることです。ユーザーは前に見たものを探すときに苦労します。長いチュートリアルなど、コンテンツが複数の重要なセクションに分かれている場合に特に深刻な問題になります。「セクションへジャンプ」オプションをつけることでこの現象を解決することができます。例えばTumblrでは、ページ内で迷子になったときのためにページの下や上にジャンプすることができるようになっています。ページ上のコンテンツはいくつかのはっきりしたブロックに分けられており、大きなインジケーターのドットが画面の左に固定されています。ヒント：「セクションへジャンプ」機能では、インジケーターのドットを使いやすくする必要があります。ドットがクリックやタップがしにくい状態だとユーザーを苛立たせることになります。そのため、ドットの大きさが適切であるかどうか確認してください。 6. コンテンツを読み込むときに、視覚的なフィードバックを表示するヤコブ・ニールセンのユーザビリティ10原則のひとつによると、システム状態の視認性はUIデザインにおいて重要な原理です。ユーザーはシステム上の現在の状態をいつでも知りたいと思っており、Webサイトは閲覧者を不安にさせてはいけません。適切な視覚的フィードバックを通して、ユーザーに今何が起きているのかを伝える必要があります。Webサイトがコンテンツを動的に読み込む場合は、ローディングが行われていることをはっきりと示さなければいけません。進行状況を示すインジケーターを使用して、新しいコンテンツが読み込まれていることを表現しましょう。読み込み時間は2秒～10秒の短い時間であるはずですので、システムが動作していることをループアニメーションで表すことができます。 7. スクロールハイジャックを行わないスクロールハイジャックのWebサイトでは、スクロールが制御され基本的なWebブラウザの機能を無効にされてしまいます。ユーザーがページをコントロールできない上に動作の予測ができなくなってしまうため、スクロールハイジャックは好ましくありません。この問題はAppleのMac Proのページで見ることができます。ユーザーがどれだけ早くスクロールしても、レイアウトはあらかじめ決められた速度で移動します。このページの全てのコンテンツはスクロールに関連付けられているため、訪問者はページを遅い速度でブラウズすることを強いられてしまいます。 8. ページの読み込み時間を最適化するロングスクロールのページでは、読み込みの長さの問題も発生します。これはWebサイトにおいて致命的な問題です。実際に、ユーザーの47％が2秒以内のWebページの読み込みを求めています。ページが3秒以内に読み込まれない場合、57％のユーザーが去ってしまいます。ロングスクロールの読み込み時間の問題は解決することができます。レイジーローディングなどの読み込み技術を利用し、ページの読み込み時間を最適化することで基本的なコンテンツにすぐにアクセスできるようにします。 9. リソース消費を考慮するロングスクロールを使用する場合は、ページが消費するリソース(CPUとメモリ)を常に考慮に入れてください。ページをリロードせずに複数のページの写真・アニメーションGIF・動画をスクロールすると、システムリソースが大幅に浪費される可能性があります。リソースが限られているデバイス(iPhoneなど)では大量のアセットの読み込みによる遅延が起きる可能性があります。そのため、さまざまなデバイスでWebサイトをテストし、該当の場所を通り過ぎたときにはアニメーションや動画を一時停止するなどの手法を利用します。 10. ユーザーの行動を考えるロングスクロールがどう効果的であるかを判断するために、ユーザーがどのように操作しているかを調査してください。アナリティクスデータが有効です。例えば、Googleアナリティクスではページ解析によって何人のユーザーが折りたたまれた部分の下をクリックしているか確認することができます。そのデータに応じてデザインを調整することが可能です。 [PR] 無料で現役エンジニアから学べるECサイトでのロングスクロール ECサイトではロングスクロールは頻繁に使用されます。ユーザーは製品のリストや検索結果を、中断することなくスクロールして閲覧し続けることができます。ただしユーザー満足度を向上させるためには、いくつかの一般的な問題に対処する必要があります。ナビゲーションとフィルタをスティッキーにフィルタリングが適切に行われていると、ユーザーは何千ものWebサイト内の選択肢をニーズに合った数少ない項目に絞り込むことができます。ナビゲーションメニューとフィルタオプションを持続的に表示することで、ユーザーがコンテンツをうまく管理することができます。それぞれのアイテムをブックマークできるようにする後々参照できるように気になったアイテムを簡単にブックマークしておける機能は、ユーザーにとって強力なツールです。条件に一致したアイテムの数を表示する利用できるアイテムの数を表示することで、ユーザーはフィルタリングによる結果内容のスクロールにかかる時間を判断することができます。フッターにアクセスできるようにするユーザーはフッターの概念を理解しており、そこにWebサイトの大事な情報があると思っています。しかし、ロングスクロールではフッターの閲覧が困難なことがあります。ページの下に行くと新しいアイテムが継続的に読み込まれ、フッターは見えないところに押し込まれます。この問題は深刻なもののように思われますが、「もっと見る」ボタンを利用することで解決できます。この手法では、コンテンツはオンデマンドで読み込まれることになります。新しいコンテンツは、ユーザーが「もっと見る」ボタンをクリックするまでは自動でロードされません。これによってフッターに簡単にアクセスできるようになります。ロングスクロールと視差効果インタラクションデザインはロングスクロールを使ったWebサイトの基礎であり、アニメーションはその中でも欠かせない部分です。 Web上でのユーザーの注目のスパンが約8秒であることを考えると、楽しいスクロールは注意を引きつける時間を引き伸ばすことができると言えます。閲覧者を喜ばせるアニメーションのひとつに視差効果があります。視差スクロールでは背景画像は手前のコンテンツよりもゆっくりと動き、深みと没頭の錯覚を作り出します。この効果によって画面の立体感が増します。パララックススクロールをどんなときに使うか視差は大きな印象を与え、訪問者がもっとスクロールしたくなるなる面白い視覚効果です。ユーザーをあっと言わせたいときに便利な手法になります。パララックススクロールは、ガイド付きの物語形式で効果を発揮します。ストーリーをスムーズに直線的に伝えたい場合、視差効果とロングスクロールを組み合わせることによってユーザーは閲覧を実体験のように夢中になって楽しむことができます。 The Boatでは、画面がスクロールされると次のコンテンツのパスを作成しながらアニメーションによって閲覧者を次の場面に導きます。スクロールの動作はより楽しいものになり、ユーザーは「次はどうなるんだろう？」とワクワクするでしょう。パララックススクロールを使うべきではないケース多くのユーザーがはっきりしたタスク(製品の購入など)を目的としている場合は、パララックススクロールは使用しないでください。もし製品を購入するたびに視差効果を見せられるAmazonがあったら、どれだけフラストレーションがたまるか想像してみましょう。パララックスとページパフォーマンス視差効果を使用するWebサイトの多くは、スクロールのパフォーマンスに苦しんでいます。iPhoneのような高画素のデバイスでは特に害のあることです。すべてのパフォーマンスの問題を完全に解決することはできませんが、簡単な手法でスクロールのパフォーマンスを向上させることができます。ブラウザのアニメーションにはtranslate3d・scale・rotation・opacityといった手軽なプロパティのみを使用してください。大量の画像をアニメートしたり、劇的にサイズを変更させたりしてはいけません。ブラウザに画像(特に巨大なもの)をリサイズさせると、コストがかかる可能性があります。一度にたくさんのものをアニメートしないようにしましょう。パララックスとアクセシビリティ前庭機能障害を持つユーザーが、そのWebサイトを使用したとき視覚的にどのようになるかを考慮しましょう。アニメーションによって目まいが起きる可能性があります。 Val Headはより安全なアニメーションをデザインする方法として、もしWebサイトに大量の動きがある場合はモーションをオフにするオプションをつけることを推奨しています。ボタンあるいはトグルスイッチを使用して、Webサイト上のアニメーションを減らしたり消したりできるようにします。このアイデアの研究のために、Nat TarnoffはどのWebサイトでも使用できるトグルスイッチのプロトタイプを開発しました。コラムコスパとタイパ、両方結果的に良くなる良くなる学び方とは？「スクールは高いし時間も縛られて効率が悪い」と考える方は多いと思います。もちろん、時間も費用もかかることは間違いありません。ただ結果的に無駄な学びにお金も時間もかける方がリスクが高いという考えもあります。

Webデザイン

デザイナー必見！クオリティの高いUIを作るために必要な7つの要素とは

本稿は、Webdesigner Depotのブログ記事を了解を得て日本語翻訳し掲載した記事になります。本記事は、UX Phoenixのインテグレーションマネジャー、エンジニアであるSamella Garcia氏によって投稿されました。ユーザーインターフェース（UI）のデザインは最近のホットな話題ですが、それには理由があります。デジタルエクスペリエンスが私たちの生活の大部分を占めるようになり、クオリティの高いユーザーエクスペリエンス（UX）の価値が今まで以上に高まっているのです。モバイル技術、デジタル技術、 IoTの今後の目覚ましい成長を考慮すれば、UIのクオリティは現時点で重要であるだけではなく、将来的にはさらに重要になるでしょう。 Webサイトから、車内の液晶ディスプレイ、部屋のサーモスタットに至るまで、私たちの毎日は数多くのUIで溢れています。ユーザーはデジタルディスプレイの体験を増やすにつれて、数年前よりも質の高い体験を期待するようになりました。そのため、企業にとって顧客への良いUXを慎重に検討することが不可欠です。この記事では、クオリティの高いUIを作るために大事な7つの要素をご紹介します。 1. シンプルさ優れたインターフェースは目立つものではありません。派手な装飾や不必要なデザイン要素から構成されてはいません。質の高いUIは、合理的でシンプルなデザイン要素から構成されているのです。インターフェースをデザインするときには、機能やコンテンツを追加する前に、「ユーザーがタスクを実行するときに、本当に必要なものであるかどうか？」を考えてください。インターフェースの構成要素は、ユーザーにとって必要最小限なものにします。自己満足のためだけに要素を加えるのではなく、UXのクオリティに意識を集中しましょう。「シンプルさ」の原則を見事に実践している例が、MAAEMOのWebサイトです。MAAEMOはノルウェーのレストランで、Webサイトのトップページに最初に表示されるのは、予約のオプション（左上のBook a table）のみです。すっきりとしたインターフェースにするために、その他のオプションは、右上のハンバーガーメニュー（三本線が平行に並んだボタン）に隠されているのです。どこから予約したらいいかを探すために、複雑なナビゲーションによって無駄な時間を取られることもありません。 2. 明瞭さ明瞭さは、Webサイトやアプリにおいて最も重要なことの1つです。UIが存在する唯一の目的は、ユーザーとシステムのやり取りを促進することです。ユーザーはインターフェースの使い方がわからない場合、不満を感じて利用をやめるかもしれません。明瞭さを高めるには、ボタン要素やアクションボタンに、わかりやすくて正確なラベルを付けます。また、メッセージング（データの通信）もシンプルにする必要があります。ラベル、ナビゲーション、コンテンツを読みやすいものにするほど、ユーザーにとって何をすべきか明らかになります。また、最初の原則は「シンプルさ」であったことを思い出してください。長い説明でごちゃごちゃと散らかすのは避けましょう。ユーザーにとって読む価値のある説明でないとしたら、UXの邪魔になるだけです。2語の代わりに1語でも説明可能なら、そうする方が良いでしょう。ラベルとメッセージを簡潔にすることによって、見やすいデザインにして、ユーザーの読む時間を短縮しましょう。テキストを簡潔かつ正確なものにできれば、優れたUXを生み出す効果があります。努力を要するかもしれませんがその価値はあります。 [PR] 無料で現役エンジニアから学べる3. 一貫性一貫性のあるインターフェースによって、UXを高める使用パターンを実現できます。ユーザーが求めているのは、製品の使い方を一度理解したら、他の画面上でも同じように操作できるような体験です。そのためにはインターフェース全体において言語、レイアウト、デザインを統一します。そうすることで、ユーザーが仕組みを理解するのを助け、ユーザーの効率性を向上し、UXを高める効果があります。 4. 親しみやすさ UXデザインの目標の1つは、ユーザーにとって直感的なインターフェースを作ることです。UIが「直感的」であるとは、ユーザーにとって自然に理解できることを意味します。これを実現するには、設計において「親しみやすさ」を活用することが重要です。 UIは、ユーザーがその使い方をすでに理解していれば、親しみやすいと感じられます。ユーザーは何をするべきかを知っているため、使い方を考える必要がないのです。ユーザーにとってシステムのやり取りが容易になるように、「親しみやすさ」を活用したデザインにできる部分がないか検討しましょう。例として、近年多くのアプリにハンバーガーメニュー（三本線が平行に並んだボタン）が使われています。ユーザーはこのアイコンを見ればそれがメニューであるとすぐにわかります。メニューを探してその使い方を考えるのに時間がかかることもありません。例として、Born ShoesのWebサイトを見てみましょう。ユーザーにとって使いやすいサイトにするために、ユーザーにとって親しみやすいアイコンが、親しみやすい位置に配置されています。コラムコスパとタイパ、両方結果的に良くなる良くなる学び方とは？「スクールは高いし時間も縛られて効率が悪い」と考える方は多いと思います。もちろん、時間も費用もかかることは間違いありません。ただ結果的に無駄な学びにお金も時間もかける方がリスクが高いという考えもあります。コスパ・タイパ最適化の参考として、

Webデザイン

事例から学ぶ！HubSpotがサイト改善に成功したUX戦略とは

本稿は、UXPinのブログ記事を了解を得て日本語翻訳し掲載した記事になります。本記事は、UXPinのコンテンツ・ストラテジストであるJerry Cao氏によって投稿されました。 UXデザイナーのAustin Knight氏率いるチームが、Hubspotのサイトをリニューアルしたプロジェクトについて書かれています。 HubSpot（ハブスポット）のサイトは、世界の90カ国以上にわたり1万8000以上の企業にサービスを提供し、月間400万人以上のユーザーがアクセスしています。 HubSpotにとって、サイトこそ経営の要となるものでした。HubSpotが非公開会社から、多様な製品を提供する世界規模の公開会社へと発展するには、サイトのリニューアルが不可欠でした。サイトリニューアルのプロジェクトは、プロジェクト開始から一ヵ月半後に開かれる、HubSpotの年次イベント「INBOUND」で新しい製品ラインがリリースされるまでに、急いで完成させる必要がありました。 UXデザイナーのAustin Knight氏がこのプロジェクトを率いて、3つのチーム（ビジュアルデザイナー、デベロッパー、マーケティングマネジャー）が加わりました。またKnight氏はこの他に、製品のポジショニング戦略（product positioning）、コピーライティング、技術開発を担当する外部の6つのチームとも協力しました。この記事では、UXデザイナーが、過密なスケジュールのプロジェクトにおいて、リサーチ、共同作業、ユーザーに焦点を当てた「Lean UX」という手法を応用しながら、どのように良い結果を生み出せたのかを事例として紹介します。画像：HubSpotのリニューアルされたサイト次の3つのステップは、実際のプロジェクトをベースとしてUXPinが作成したベストプラクティスです。ステップ1：入念なリサーチ、継続的なテスト HubSpotのプロジェクトは、まず最初に、Knight氏が「Lean UX」という手法をチームに紹介することから始まりました。「Lean UX」とはJeff Gothelf氏によって提唱されている手法で、継続的な「学習ループ」（構築 – 評価 – 学習のループ）を用いてデザインプロセスを軽量化することによって、ビジネス戦略を整えるためのものです。このプロジェクトでは、ステップ1は、分析とユーザー調査を行い、手早く予測の検証を行うことでした。分析＆ヒートマップ多くのケースにおいては、デザインチームはマーケティング部門にデータ分析を依頼するのが一般的ですが、今回のプロジェクトでは、Knight氏は自らデータ分析を始めました。HubSpot、Googleアナリティクス、Mixpanelから膨大なデータにアクセスできました。主な課題は、これらの膨大なデータを分析して、意味のあるパターンを見つけ出すことでした。 Knight氏はまず、多くのユーザーの行動を分析した結果、次のような傾向が見られることに気づきました。サイト上でPRICING（価格表）に最初にアクセスする（ユーザーは製品のメリットよりも価格を優先していることがわかります。）サイト上でFAQ（問い合わせ）に最初にアクセスする（ユーザーの疑問が解決されていないことがわかります。）サイト上でサイト内検索を最初に利用する（主に製品について不明な点を検索しているので、ユーザーが必要な情報をサイトで得られていないことがわかります。）この分析から、HubSpotのサイトは完成度は高いものの、重要な情報が欠けているために、コンバージョン率が低下していることが判明したのです。 Knight氏はまた、2万5000人のユーザーを対象に、ヒートマップとスクロールマップによる分析を行い、合計46万7308のデータを集めました。数年分のデータを集めることができたため、問題（例として、ユーザーの25%しかサイトのページをスクロールしていないことなど）が生じた原因を理解するのに役立ちました。セッションの記録最後に、セッションの記録によって、定量分析と定性分析を行いました。セッションの記録は、生きた、匿名性のある、未だ分析されていないデータです。実際のユーザーの行動がそのまま反映されたデータなので、分析結果も信頼できます。セッションの記録は、デザインプロジェクト全体を通して行い、ユーザーへのインタビューやユーザビリティテストの結果を検証するのに役立てます。定性分析定量分析は何（What）を分析するのには役立ちますが、なぜ（Why）を知ることはできません。ユーザーエクスペリエンスに期待されることや、行動に隠された動機を知るためには、デザイナーはユーザーと利害関係者にインタビューを行う必要があります。 1. ユーザーへのインタビュー HubSpotのサイトの利用者の10%は、ログインや情報検索をしているユーザ―であるため、サイトのリニューアルにあたっては、これらの特定のグループを無視することはできません。データの分析結果を検証するためだけではなく、新しいサイトでどのようなコンテンツを提供するべきかのアイデアのヒントを得るために、Knight氏はユーザーへのインタビューを行いました。ユーザーへのインタビューのプロセスを徹底して考えたことで、的を絞って意見を集めることができました。 2. 利害関係者へのインタビューこのプロジェクトによってHubSpotのサイトの外観が根本的に変わることになるため、Knight氏はまた、HubSpotの会社の取締役、製品、マーケティング、セールス、カスタマーサポートのチームにもインタビューを行いました。次にKnight氏は、ユーザーへのインタビューから得られた意見、カスタマーサポートの記録、HubSpotのサイトのリニューアルの不要な原案、Twitterのツイート、電子メール、さらにはKnight氏自身の講演イベントでの参加者との会話などの結果を総合的に勘案にしました。「プロジェクトで取り組んだのは、『データを参考とした、人間を中心に考えたデザイン』だ。」とKnight氏は述べています。また、「デザイナーは可能なときにはいつでも、自分自身でデータを解釈して、デザインに関する決定を行う必要があります。近年、定量的なデータと定性的なデータを活用することで、デザイナーたちがますます力を発揮できるようになりました。一般的に、単なる意見や誰かの「好み」に基づいて決定することもなくなり、それ以上のことが可能になっているのです。今日のデザイナーが真に力を発揮するには、明示的なデータと黙示的なデータの両方を活用して、デザインのソリューションを導くことが大切です。」とも述べています。多変量テストによって、小さな変更を試す最後に、Knight氏はリサーチの結果を基にして、多変量テスト（Multivariate Testing：レイアウトデザインの候補の中から、最適なデザインを選ぶための手法）を行うために、デザインにいくつか変更を追加しました。多変量テストは、特定のデザイン要素を決定、却下することで、サイト全体のリニューアルに進む前に、チーム全体として戦略的な決定を行うのに役立ちます。ステップ2：実際のデザインを設計する Knight氏は、「全体の設計→テスト→学習→イテレーション→最適なソリューションの選択」という構造化されたプロセスの手法を用いました。簡単なプロトタイピング多変量テストによって、レイアウトのデザイン候補をチームで3つに絞り、さらにプロトタイプを作成しました。主な方向性が定まったところで、Knight氏は最初の段階でイテレーションを繰り返して行い、次に外観のデザインに取り組むという手法を取りました。実際には、ユーザー望む方向性や意見を反映することに多くの時間を費やしたことを考えれば、プロトタイプでも最終的な完成製品に近いものでした。 Knight氏は次のように述べています。「紙のプロトタイプ、ワイヤーフレーム、外観のデザインの段階に至るまで、テストはユーザーと共に行っています。」「プロジェクトのすべての段階において、ユーザーの声が反映されています。デザイナーとしては、ユーザーの声は耳に痛いこともあるかもしれません。ユーザーの意見にすべて従うのではなくて、方向性を見出すために活用するのがいいと思います。」モックアップ外観のデザインの段階において、Knight氏は特にビジュアルデザイナーと一緒に仕事を行いました。また、Knight氏はデベロッパーとは、プロジェクトの各段階ごとにデザインについてディスカッションを行っていたのも特筆すべきことです。開発側は、プロトタイプを作成する段階で集中的にコーディングを行う一方、全体を通してイテレーションを行うことで、チーム全体としてプロジェクトの進行段階が揃うようにしています。外観のデザインこうしてチームは、現代的で、美しく、鮮やかな色、HD画質の画像、型にはまらないグリッドデザインを活かしたサイトが完成しました。このグリッドデザインは、リニューアルしたサイトには「生き生きとしたデザイン」が必要だという観点から生まれたものです。グリッドデザインをベースとして、多くのデバイスに対応したマルチプラットフォームで、コンテンツの変更や削除も容易です。また重要なコンテンツは、ユーザーや利害関係者の提案に応じて、アップデートしやすくなっています。画像処理画像の枠のデザインも、型にはまらないグリッドデザインです。プロジェクトのチームは、まずサイトのレイアウトに完璧に収まる画像を選びました。マウスをホバーしていない状態（off-hover）では焦点のぼやけた画像の一部が表示され、マウスをホバーさせた状態（on-hover）では画像が右のグリッドの領域まで広がり、画像全体と追加の情報が表示されるような設計になっています。この画像処理によって、識別しやすいデザイン要素が生まれ、ユーザーのアクセスを大幅に増加させるインタラクションが実現しました。またチームは、ユーザーへのインタビューから、個々のユーザー向けに動的なコンテンツを提供することが、サイトリニューアルの成功に大切な要因であるとわかっていたので、これも開発しました。互換性とWebアクセシビリティ最後に、HubSpotのサイトのユーザーの16%はモバイル端末からアクセスしていること、アメリカの人口の19%はWebアクセシビリティのニーズがあることを考えると、コーディング作業に加えて、互換性とWebアクセシビリティを考慮するのも重要なことでした。プロジェクトの各作業の段階は同時並行で進めていたので、モバイル端末向け、デスクトップ端末向けの各サイト設計も同時並行で進めました。 [PR] 無料で現役エンジニアから学べるステップ3：コーディングとテスト次のステップでは、HubSpot社のCMSを利用して、きれいなコードを設計するのが目標となりました。すべてのデバイスにおいてコードの互換性が保たれるように、Knight氏は、ビジュアルデザイナー、エンジニアと共に、QAテスト（品質保証テスト）を定期的に実施しました。各種デバイスや、Chrome、Safari、Firefox、Internet Explorer、Edge、Opera、Yandexなど各種ブラウザの多数のバージョンの解像度ごとに、Webサイトが正しく機能するかチェックするテストも行いました。さらに、BrowserStack（多数のブラウザ環境下における作動を再現するためのエミュレータ）を使い、実際のデバイス環境下におけるWebサイトの作動の再現も行いました。設計を改良するときには、ユーザーのプラットフォームごとの割合はすでに把握できていたため、利用者数やクリティカリティ（Criticality：システムエラーなどにおいて主要な要因を分析するための指標）を考えながら、優先順位を決めて効率的に進めることができました。ステップ4：テストの継続とイテレーションリニューアルしたHubSpotのWebサイトは、予定通り、年次イベント「INBOUND」の舞台において、同社の共同設立者たちによって、Webサイトのサポート対象である新製品や新機能の紹介とともに初公開されました。新製品のリリースは、大成功を収めました。しかし、チームとしては引き続き「Lean UX」の手法をプロジェクトで実践するため、栄光に浸っている暇はありませんでした。早速、チームはGoogleアナリティクスとHubSpotのサイトからデータを集計して、次の指標に注意を向けました。コンバージョン率（Conversion rate：目標の達成率）送信率（Submission rate：ユーザーがフォームにデータ入力して送信する率）離脱率（Drop-off rate）目標達成数（Goal completion）ナビゲーションサマリーにおける、参照元ページと移動先ページ検索クエリ（Search Queries）チームは、直帰率（Bounce rate：ユーザーが1ページだけ見てサイトを去る率）、ページ滞在時間など重要業績評価指標（KPI：Key Performance Indicators）として役に立つ指標のみを分析しました。さらにデザインの改良を重ねるために、チームはヒートマップを使って2万5000という膨大なセッションを分析し、追加のユーザビリティテストも行いました。コラムコスパとタイパ、両方結果的に良くなる良くなる学び方とは？「スクールは高いし時間も縛られて効率が悪い」と考える方は多いと思います。もちろん、時間も費用もかかることは間違いありません。ただ

Webデザイン

Airbnbを事例に学ぶ！失敗しないWebサイトの作り方とは

本稿は、Designmodeのブログ記事を、了解を得て日本語翻訳し掲載した記事になります。また本記事はIndra Sofian氏によって投稿されました。 Webサイトの優れたデザインというと何を思い浮かべますか？私にとってはAirbnb（エアビーアンドビー）です。トップページに人目を引く動画があったり、カラーパレットの構成が良いだけでなく、優れたユーザー体験を考えて設計されているように思います。では、優れたユーザー体験の定義とは何でしょうか？ 1つの条件は、ナビゲーションや検索機能が優れていることです。ユーザーの求める情報を提供することが、ビジネスで使われるWebサイトの主な存在理由だからです。もしユーザーが必要な情報を得られない（または情報がわかりにくい）としたら、そのサイトは失敗作です。ユーザーが必要なときに必要な情報を得られるように、レイアウトとコンテンツを上手く組み合わせましょう。他にも考えるべき事は多くあり、失敗も数多く経験するかもしれません。最初は急がず、まず土台となるコンテンツから作り始めます。ワイヤーフレームから始めて、次にイテレーション（反復型の短期の開発サイクル）を実践し、最後にインタラクティブなモックアップを作成します。なぜワイヤーフレームを作るのか？ワイヤーフレームを作るメリットは、デザインのアイデアを形にしたり、イテレーション（反復型の短期の開発サイクル）を行うのに役立つことです。ワイヤーフレームはサイト完成時のコードを備えたものではなく、静的な試作デザインです。さらに動作性もテストできるインタラクティブなワイヤーフレームであれば、完璧です。ワイヤーフレームを作るときには、重要なデザイン要素を改良するために、失敗や試行錯誤があってもいいでしょう。またWebサイトにはそれぞれ目的があるものですが、ワイヤーフレームを使うことで、目的に最も合ったフレームワーク、コンテンツ、デザイン要素を作成できます。たとえば、Airbnbは旅行サイトでは、ユーザーに良い旅先と良いホスト先の情報を提供することが目的です。ヘッダーからリスト構造に至るまで、この目的に最適なデザインが考えられています。また、デザインの要はコンテンツです。ユーザーがWebサイトに訪れるのは、美しいデザインを見るためというよりも、情報を得るためです。 UIデザインの不変の原則ワイヤーフレームやモックアップを使った練習に入る前に、もう一度Airbnbの優れた点を考えてみましょう。 1.質の高い画像で注目を集める多くの人は旅行しようと考えるとき、おそらく詳細な計画やレンタカーの情報よりも、視覚的なイメージが先に思い浮かぶはずです。こうした傾向を踏まえて、視覚的なイメージを活用しているのがAirbnbです。ホスト先のリストなどすべてのコンテンツにおいて、画像がテキストより優先して使われています。レイアウトの大半は画像で占められていて、画像の隣に太文字の使われた要素やボタンを置いて、ユーザーがクリックしやすいようになっています。ヘッダーには、Airbnbの利用者が世界の旅先で異文化や多様な環境を体験している動画を使っています。これこそまさにユーザーが旅行サイトで見たいと思っているものです！フォームに文字を入力してホスト先の予約をするだけではなく、実際の旅行を疑似体験できるのです。 2.コンテンツをシンプルにする旅行の計画は、複雑で煩わしいものになりがちです。旅行先選び、行く場所の下調べ、滞在期間、ドライブの経路など考えるべきことが多くなります。 Airbnbのサイト上ではこうした情報を整理して、最も関連性の高い情報に的を絞って提供しているのです。データ入力用フォームはシンプルで、ホストの使うボタンも見つけやすいです。また、リスト構造もブラウジングが容易になるすっきりした設計です。ページには要素がリスト構造で並べられ、両端には余白が設けられているだけで、広告など余計な情報もなくすっきりしています。背景とフォントのコントラストが高く、コンテンツの文章もシンプルな語り口です。トップページで冗長な文章が続くこともなく、各コンテンツはシンプルな画像とその上の太文字のテキストから構成されています。 3.最も重要な機能を強調する Webサイトは、最もよく使われる機能へのアクセスが、最も容易になるようにデザインするべきです。ユーザーがサイトを訪問する理由を考えましょう。たとえばAirbnbでは、ユーザーはホスト先を探すためにサイトを訪問しています。そのため、次のようにCTA（コールトゥアクション）が上手く使われています。トップページの中央には、ユーザーにホスト先を案内するためのボタンが、CTAとして配置されています。また検索バーのボタン（「Search」）には、よく目立つピンクの色が使われています。検索バーの背景に、透過性のある黒い色を置くことで、検索バーをCTAとして一層目立たせています。ヘッダー中央に動画再生ボタンが配置されていて、ユーザーがクリックすると、旅行体験の動画が再生されます。また、Airbnbでは、ホストになることに興味のあるユーザー向けにも、「ホストになる」というボタンやホスト収入を示したブロック要素によって、わかりやすく情報を提供しています。 [PR] 無料で現役エンジニアから学べるAirbnbのWebサイトを作るためのステップではAirbnbのWebサイトを作ってみましょう。最初はワイヤーフレームです。ワイヤーフレームを作るメリットは、レイアウトに必要な要素を組み立て、全体としてどのように機能するかを試せることです。 Airbnbのサイトをまず静的なワイヤーフレームから組み立ててみましょう。 1.基本のレイアウト私の方法では、まずレイアウトの骨組みを作ることから始めます。「コンテンツワイヤーフレーム」として知られるこれらのボックスは、サイトのページ上の各要素を表しています。このステップでは、コンテンツ、視覚的な階層構造を主に考えましょう。これらのボックスを使って、ナビゲーションバー、ヘッダーなど各要素の配置を試してみます。この骨組みを作っておくことで、実際のデザインを詳細まで考えなくても、全体のレイアウトを考えることができます。新規のデザインを作成するときには、ボックス型のワイヤーフレーム同士を矢印でつないで関係性を示し、コンテンツの全体構造を把握するのもいいでしょう。既存のデザインに修正を加えるだけであれば、基本のデザインは完成しているので、最初からモックアップ作成のプロセスに進んでもいいでしょう。 2.ヘッドライン（見出し）とヘッダー見出しとヘッダーは、重要な要素です。見出しはユーザーの視線を瞬時に集められるような、はっきりとした表現力のあるデザインがいいでしょう。たとえば、Airbnbでは「Live There（暮らしてみよう）」という見出しを使っています。Airbnbは旅行先のホストを紹介するサービスなので、「travel there（旅してみよう）」や「visit there（訪れてみよう）」ではなく、このキャッチコピーが合っているのです。次に小見出しとして、「現地のホストのお家に宿泊して、191か国以上で暮らすように旅しよう」を作ります。ユーザーに、Airbnbの体験やどこからでも使える利便性を伝えられます。ヘッダー画像は、ユーザーが最初に目にするものです。ヘッドラインとのバランスが悪かったり、気を散らすような画像だとユーザーを失いかねません。ページにふさわしいヘッダー画像を使いましょう。 Airbnbでは、ユーザーが世界中で魅力的な旅をしている動画をヘッダーに使っています。 3.CTA（コールトゥアクション） CTA（コールトゥアクション）は、ユーザーを必要な動作へ上手く誘導できるデザインにすべきです。使う文言は、「続きの内容はコチラ」のような曖昧なものではなく、明快にすべきです。デザインとしては、緊急性が高いことを上手く伝えられるものがいいでしょう。 AirbnbのCTAは明快かつ詳細です。検索バーでは、「場所」「日時」「宿泊人数」などの要素、ピンク色の「探す」という要素を使って、わかりやすく構成されています。 CTAをヘッドラインの下に配置するのはよくあるレイアウトですが、Airbnbのサイトではこれが特別な効果を発揮しています。つまり、ただ目立つだけではなく、ユーザーはヘッダーの魅力的な動画を見ながら、検索バーで旅行のプランを検討できるのです。 4.コンテンツのブロック次にページのコンテンツを作ります。ここでは実験的に一部を作ります。 Webサイトの作成で、ページにヘッダー以外の要素も入れるときには、一番上のコンテンツに注目を集めるようなデザインにします。このブロックは、ほとんどヘッダーと同一化した要素と見なせます。 Airbnbのユーザーには、「旅行者」と「ホスト」の2タイプいます。ここで作成したブロックは、「ホスト」向けのものです。ブロック内に小さなCTAの要素（see what you can earn：「収入を見る」）を配置しています。 5.ナビゲーションバーナビゲーションバーは小さいながら、ユーザーの案内役として非常に役立ちます。ユーザーがサイト上で探している情報を見つけられない場合にも、最初に使うのはおそらくナビゲーションバーです。ナビゲーションバーに使うアイコンの数は限定しましょう。ナビゲーションバーのスペースは限られているので、あまり多くのアイコンを詰め込みすぎると、ユーザーを疲れさせる原因となります。それに見た目にもごちゃごちゃした感じになります。ユーザーを案内するのに必要十分なアイテムだけでいいのです。たとえばAirbnbでは、4つのアイコンに限定しています。「ホストになる」は、ユーザーの約半数に向けて作られたものです。「メッセージ」では、ユーザーに重要な通知を送ります。「ヘルプ」は総合案内です。「アカウント」はユーザーの情報管理のためのものです。 6.インタラクティブな設計にするインタラクティビティ（動作性）は、ユーザーエクスペリエンスの要です。インタラクティブな設計にするには様々な方法がありますが、ここではページ上で最も重要な、CTAの要素に動作性を加えてみます。モックアップの作成では、すべての要素にインタラクティビティを加える必要はありません。完成したサイトをイメージするのに十分な程度で構いません。また、少なくとも5人のユーザーに試用してもらいましょう。ドロップダウンメニューを追加して、ページ上にポップアップウィンドウで表示されるようにして、ユーザーがボタンをクリックしたり、マウスのカーソルをボタンから移動した時に消えるようにしてみました。また、マウスが検索ボタンの上にホバーした時に、ボタンの色が変わるようにしています。このような小さな工夫を加えることで、ユーザーにボタンに気づいてもらいやすくなります。上の画像は、検索バーの「目的地」にドロップダウンメニューを加えてみたものです。次のステップへこれですべてです！今回は、コンテンツのワイヤーフレームを作成し、イテレーションを実践し、動作性を備えたモックアップへと作り変えるステップを紹介しました。 Webサイトを作るときの、ワイヤーフレームとモックアップの作成スキルは、きっと他の場面でも応用できます。 [お知らせ]TechAcademyでは初心者でも最短4週間でオリジナルWebサイトを公開できるWebデザインオンラインブートキャンプを開催しています。プログラミングを独学で学習していて、このように感じた経験はないでしょうか？・調べてもほしい情報が見つからない・独学のスキルが実際の業務で通用するのか不安

Webデザイン

WordPressの使い方！初心者でもサイト作成が簡単に｜現役エンジニアが解説

WordPressを使用するとデザインの変更や機能のカスタマイズ、データの管理を手軽に行える多機能なブログサービスを作成することができます。実際、このTechAcademyマガジンもWordPressを使って作られたサイトです。他にも企業のコーポレートサイトやブログサイトなどの多くはWordPressを使われているのです。サイト作成に便利なプラットフォームなので、ぜひ使えるように理解していきましょう。そもそもWordPressとは何なのかよく分からない方は、今さら聞けない！WordPressとは【初心者向け】をご覧ください。なお本記事は、TechAcademyのオンラインブートキャンプ、WordPress講座の内容をもとに紹介しています。大石ゆかり田島メンター！！WordPressのことはなんとかわかったんですけど、どうやって使うんですか〜？田島悠介 WordPressを使うにはインストールや初期設定が必要なんだ。大石ゆかりなんだか難しそうですね・・・。田島悠介きちんと手順に従えば簡単にできるよ。インストールさえしてしまえば、簡単に記事の作成とかサイトデザインとかもできるから。それじゃあ教えてあげるね。大石ゆかりよろしくお願いします！！！目次 WordPressのインストール手順初期設定とインストール WordPress管理画面の基本設定記事の投稿方法カテゴリーとタグの管理ユーザー管理パーマリンクの設定テーマの使い方プラグインの使い方 WordPressで知っておきたいその他の設定 WordPressのインストール手順用意するもの PHP・MySQLが使用できるサーバー(レンタルサーバーなど) 以下の条件があります。 PHP バージョン 7.4 以上 MySQL バージョン 5.6 以上または MariaDB バージョン 10.1 以上 HTTPS対応 (2020年6月時点) FTPクライアント(今回はFileZillaを使用します) 独自ドメイン(yahoo.co.jpのように自分のサイトを公開する場合に必要です) 独自ドメイン、レンタルサーバーについては別途記事内で比較しています。合わせてご覧ください。本体の入手とサーバーへのアップロードまずはWordPressの公式サイトのダウンロードページにアクセスしましょう。 WordPress – ダウンロード以下のボタンをクリックしてWordPress本体をダウンロードします。ダウンロードし、解凍した「wordpress」という名前のフォルダを任意の半角英数字の名前に変更します。ここではwpとしています。(変更せず、「wordpress」のままでもOKです) FTPクライアントを使用してサーバーに本体をアップロードします。今回はFileZillaを使用します。サーバーに接続し、WordPressを設置したい場所にフォルダごとアップロードします。アップロードしたフォルダのある場所にアクセスします。※ ※例えばhttp://xxxx.ne.jp/に「wp」と名前変更したWordPressフォルダをアップロードした場合、アクセスする場所はhttp://xxxx.ne.jp/wpとなります。また、これがそのサイトのアドレスになります。 [PR] 無料で現役エンジニアから学べる初期設定とインストールデータベースの設定を行います。「さあ、始めましょう！」のボタンをクリックします。データベース名・ユーザー名・パスワード・データベースのホスト名を入力し、「送信」ボタンをクリックします。これらは使用しているレンタルサーバーにより設定が異なります。以下は、レンタルサーバーのスターサーバーでの例です。(管理画面の「データベース設定」から見ることができます) パスワードはこのデータベースで設定したものを入力します。また、データベースの文字コードは「UTF-8」にしておきます。「インストールを実行」をクリックします。ここではWordPressサイトの基本的な設定を行います。また、これらの項目は全て後でいつでも変更できます。「検索エンジンがサイトをインデックスしないようにする」にチェックを入れるとサイトが検索エンジンに表示されない状態にしておくことができます。テスト導入時などにチェックします。入力後「WordPressをインストール」をクリックします。インストール完了のメッセージと、ログイン用のユーザー名とパスワードに関する情報が表示されます。続いてログイン画面が表示されます。設定したユーザー名とパスワードを入力し「ログイン」をクリックします。管理画面の基本設定ログインするとWordPressの管理画面が表示されます。記事の投稿やサイトデザインの変更、プラグインの追加や各種設定はこの画面から行います。サイトの基本情報変更左メニューの「外観」から「カスタマイズ」を選択します。「サイト基本情報」を選択します。サイトのタイトルとキャッチフレーズはここからいつでも変更できます。ログイン・ログアウト方法管理画面からログアウトする場合は上メニューのユーザー名から「ログアウト」を選択します。再び管理画面にログインするときはサイト上の「ログイン」(テーマにより表示されないものもあります)か、WordPressフォルダ内にあるwp-login.phpにアクセスすることでログイン画面に移行することができます。※ ※例えばhttp://xxxx.ne.jp/wpというサイトの場合はhttp://xxxx.ne.jp/wp/wp-login.phpがログイン画面へのアクセスになります。コラムコスパとタイパ、両方結果的に良くなる良くなる学び方とは？「スクールは高いし時間も縛られて効率が悪い」と考える方は多いと思います。もちろん、時間も費用もかかることは間違いありません。ただ結果的に無駄な学びにお金も時間もかける方がリスクが高いという考えもあります。

WordPress

記事を検索

ニュース

インタビュー

テクノロジー

キャリア

お問い合わせ

事例や仕組みを分かりやすく解説！P2P（ピアツーピア）とは

P2Pとは