Webデザイン

初心者でも使える6つ厳選！無料でワイヤーフレームを作成できるツール

無料で使える「ワイヤーフレーム作成ツール」を6つ紹介する記事です。初心者でも簡単に使えるツールだけピックアップしています。手書きやIllustratorなどで作るよりも、効率的にWebサイトの設計ができるので便利です。

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

ワイヤーフレームとはWebサイトのデザインの設計図で、サイトのどこに何を配置するかをイメージしたものです。モックアップとも呼ばれます。最近ではWebサイトだけでなく、スマートフォン用のサイトやアプリの開発の際も利用されます。

手書きで書いたり、Illustratorなどを使っても作成可能ですが、ワイヤーフレーム作成ツールを使って効率的に作成する方法もあります。

今回は、初めて使う人でも簡単に利用できるおすすめの無料ツールを7つ紹介するので、気になったものから使ってみてください。

なお、モックアップを作成できるツールの記事も用意しているので合わせてご覧ください。

Cacoo（カクー）

Cacoo

日本語で利用でき、グループでチャットをしながら作業も可能な多機能サービスです。細かいチュートリアルがあるため、操作の手順をいつでも確認することができます。

また、他のユーザーが作成した画像を購入あるいは無償でダウンロードして、作成の際に使用することも可能です。

利用するには会員登録が必要ですが、メールアドレスでの登録以外にもtwitterやFacebookとの連携もできるようになっています。作成したものはPNGやPDFで出力することができます。

Cacoo（カクー）の使い方

moqups

英語のサイトですが、web上で手軽に操作できます。

アカウント登録することでローカルからアップロードした画像をワイヤーフレーム内で利用したり、作成したものをPDFやPNG形式でダウンロードすることが可能です。

moqups利用方法

moqups

[PR] Webデザインで副業する方法とは

wireframe.cc

こちらも英語のサービスですが、解説ムービーがあるので初めての方でも安心です。

ドラッグで範囲作成、ツールを選択、右クリックからのメニューなど機能が多く充実したツールです。saveボタンを押すと独自のURLが割り当てられ、そこに続けて保存することが可能です。

有料版ではPNGとPDFで保存できるようになっています。

wireframe.cc利用方法

wireframe.cc

Prototyper

WindowsとMacに対応したダウンロードソフトのツールです。

フリーソフトでありながら本格的ですが、さらに高性能な有料版も存在します。フリー版ではPDF形式で保存することができるほかに、有料版ではHTMLで書き出しすることも可能です。

Prototyper利用方法

Prototyper

mockingbird

最後も英語のサービスです。左のツールボックスからドラッグ＆ドロップで簡単に操作できるのが特徴です。

ツールの内容は動画や地図の画像、RSSのアイコンなど実際によく使うものも多いためイメージがしやすくなっています。また、複数のページ構成を見ながら編集することができます。

PNG形式でダウンロードが可能です。

mockingbird利用方法

mockingbird

POP

スマホアプリを利用したワイヤーフレーム作成サービスです。

1ユーザー、1プロジェクトまでであれば無料で利用できます。

スマホで操作することができるため、空き時間に簡単にワイヤーフレームが作成可能です。

使用方法

手書きのワイヤーフレームを書きます。

↓

スマートフォンのPOPアプリで撮影します。

↓

アプリ側で操作します。

↓

タップすると手書きのワイヤーフレームが反応して、ページ遷移なども可能になります。

POPの使い方を説明している動画は次のとおりです。

いかがでしたか？

フリーソフトなので、ぜひ気になるものから使ってみてください！

XML形式のサイトマップを無料で作成できるツールもあるので、合わせてチェックしてみてください。

[お知らせ]TechAcademyでは初心者でも8週間でオリジナルWebサイトを公開できるWebデザインオンラインブートキャンプを開催しています。ワイヤーフレームの作成方法もカリキュラムで扱っています。

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

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

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

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

今さら聞けない！FFFTPの使い方

Windows用のFTPクライアントソフトの中で特に有名なFFFTPのインストール方法と簡単な設定などの使い方を初心者向けに解説した記事です。 ...

Webデザイン

HTMLのfieldset要素で使える属性を現役エンジニアが解説【初心者向け】

HTMLのfieldset要素で使える属性について、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。そ...

HTML

必ず知っておきたい！11月のWebデザインにおける3つのトレンド

本稿は、Webdesigner Depotのブログ記事を了解を得て日本語翻訳し掲載した記事になります。本記事は、10年以上フリーランスのライターとして活...

Webデザイン

ヒーローイメージで印象を大きく変える10のデザイン事例

本稿は、Smashing Magazineのブログ記事を了解を得て日本語翻訳し掲載した記事になります。本記事は、UI/UXデザイナーのNick Babi...

Webデザイン

CSSのみで続きを読むボタンの実装方法を現役エンジニアが紹介【初心者向け】

長いテキストや要素をコンパクトに表示したいときに便利な「続きを読むボタン」をHTMLとCSSのみで実装する方法について、テックアカデミーのメンター（現役エンジニ...

CSS

【綺麗に見せたい！】CSSでグラデーションを付ける方法【初心者向け】現役エンジニアが解説

CSSでグラデーションをつける方法について、テックアカデミーのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。そもそも...

CSS

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

【未来のUIデザイナーへ！】初心者のためのプロトタイピングガイド

本稿は、本稿は、Web Designerdepotのブログ記事を、Web Designerdepotより了解を得て日本語翻訳し掲載した記事になります。プロトタイピングの概念そのものは、インターネットの成立以前から存在していました。典型的な例として、新しい製品を開発をする人々は最初に製品を組み立て、次に製品が期待した通りに作動するか試します。最初のバージョンで特許を取得して、潜在的な投資家に製品を見せることもあるかもしれません。もし投資家が独自の生産ラインの設備を利用できるとしたら(例えば既存の会社で働いているなどの理由から)、製造可能なレベルのモデルが完成するまで、製品の開発が進められて、バグの修正も行われます。昔のデモディスクを覚えていますか？機能の制限されたプログラムが入っていたり、ゲームの初歩レベルあるいはゲームが2つだけ入っているようなディスクのことです。プロトタイプはデモディスクと似ている点が多くありますが、よりシンプルでさえあります。 Webサイトやアプリのプロトタイプを作成するのは、期待した通りに作動するか確かめるためです。プロトタイプの目的は、将来の顧客の獲得というよりも、より良い製品を作るのに役立てることです。 Webサイトやアプリのプロトタイプは、製品が期待通りに作動するか確かめるために作成します。またクライアントや潜在的な投資家に製品の作動を示すこともできます。最近では、Webとモバイルアプリ用のプロトタイプ作成アプリが多数登場しています。最近リリースされたデザインツールのAdobe Experience Designerは、Webとモバイルに対応したデザインアプリとしての機能と、プロトタイプ作成用のアプリとしての機能が融合されています。 Adobe社の知名度とプロ向け製品における市場シェアを考えれば、多くの人々が今まで以上にプロトタイプを実践し始めているのも当然かもしれません。今回の記事は初心者向けのガイドです。デザイン業界でどのような経験を積んできたかにかかわらず(あるいは未経験でも)、プロトタイプを日常的に使い始めた方向けに書いています。このガイドでは何よりもまず基本的な原則を説明します。もちろんその後に発展的な情報として、役立つツールやアプリをリンクとともにご案内します。ワイヤーフレーム＆モックアップ VS. プロトタイプデザイナーとしての経験が豊富な方は、すでにワイヤーフレームやモックアップを編集で利用しているかもしれません。ただ、これらは必ずしもプロトタイプとはいえません。ワイヤーフレームやモックアップで問題なのは静的なことです。製品の機能についての多くの情報を伝えることができないのです。このため、製品の動作性についてクライアントやデベロッパーに誤解を与えるおそれもあります。こうした理由から、プロトタイプとは一般的に、何かインタラクティブな要素を持つものと定義できます。ただし、例外的に静的なものにもプロトタイプと見なせるものもあります。例えば、概念的なプロトタイプや、詳細に作成された設計書などです。重要なのは単にインタラクティブであることよりも、製品に期待される機能について情報を伝えられることだからです。それでもやはり、ワイヤーフレームやモックアップは単にプロトタイプの作成によく使われているという理由だけで、誰も捨てようとはしません。いつプロトタイプが必要になるのか？何かがどのように作動するかを示す必要があるときにはいつでも、プロトタイプが必要です。わかりやすい例は、Webアプリやモバイルアプリです。アプリは、モックアップでは簡単に見たり予測したりできない機能を数多く持っている傾向があります。コンテンツ中心型の静的なWebサイトでさえプロトタイプを必要とするかもしれません。 1つの理由として例を挙げると、私は以前クライアントにシンプルなビジネスサイトのモックアップを見せたときに、クライアントから「トップページにある「概要」や「サービス」などをクリックしたら別のページに移行するのか？」、「コンタクトフォームでユーザーが「送信」をクリックしたら、私はメールを受信することになるのか？」と聞かれたことがあります。シンプルなタスクでさえ不確実性を伴うことがあり、プロトタイプは当て推量を解消するのに役立ちます。また、簡単なブラウジングの操作さえ、ユーザーやクライアントによってはわかりづらくて大変な作業となりえます。プロトタイプがあればネットワークからサインオフするときにも、当て推量する手間を省くことができます。加えて、プロトタイプはユーザーテストに役立ちます。ユーザーテストを行うときには、初期段階からプロジェクトのシミュレーションを始めるのがベストです。作業がほとんど完了した後に大きな変更をしなければならない事態は避けたいところです。 [PR] Webデザインで副業する方法とは4種類のプロトタイププロトタイピングを始める前に、どの種類を使うか決めます。ほとんどのデザイナーたちが実践しているように、どのようなプロジェクトでも複数の種類を組み合わせて使うことができます。 1. 概念的プロトタイプこのプロトタイプは、形の上では完成した製品と全く似ていません。ここでインターフェースのディテールとレイアウトは重要ではありません。インタラクションとプロセスだけに集中します。全てのプロトタイプの目的は製品の動作性を示すことです。その意味で、このプロトタイピングは原始的な形だといえます。機能性だけがテーマであり、形は問題となりません。この段階では、フローチャート、ポストイットのメモ、PowerPointのプレゼンテーション、アイコンでプロセスを説明するビデオを使ったり、身振り手振りを加えてカメラに向かって録音してもいいでしょう。要点を伝えることができれば何でもいいのです。概念的プロトタイプはプロジェクトの初期段階で使われます。プロジェクトにはまだ名前がないかもしれません。アプリやWebサイトもアイデアの段階なので、「こんな感じで作動すると思う。」と話しているかもしれません。 2. ローファイプロトタイプローファイプロトタイプでは、レイアウトやスクリーンのサイズなど具体的な対象を扱うようになります。このプロトタイプは、作られるのも破棄されるのもサイクルが速いです。ローファイプロトタイプの目的は、あなたとクライアントが基本的な部分に満足できるまで、試行錯誤を最速で繰り返すためのものです。だからプロトタイプに愛着を持つべきではありません。ほとんどのプロトタイプは使い捨てであり、それこそが長所です。「ローファイプロトタイプ」は「ワイヤーフレーム」とよく置き換えることができます。この段階では紙に書いて行うこともよくあります。アプリでローファイプロトタイプを作成するときには、他のスクリーンへのリンクやコメントの機能など、基本的なプロトタイピングの機能を備えているものを使うことがおすすめです。ワイヤーフレームのアプリはインターネットとの連携が容易であるというメリットがありますが、やや動きが遅いことも多いです。概念的プロトタイプと同じくプロジェクトの初期段階で使われますが、ビジネスモデルやプロジェクト名はすでに存在している段階でしょう。上手くいくと確信できるものが持てるまで、頭の中で思いつく無数のアイデアをえり分ける時です。 3. ミディアムファイプロトタイプ段階によっては、ローファイプロトタイプでは要点を把握しにくい一方、ハイファイプロトタイプでは十分過ぎることがあります。スタイルガイドを完全には作成していなかったり、まだグラフィカルアセットを全て作り終えていない段階です。ミディアムファイプロトタイプは、このようなデザインの初期～中間の段階で使うことができます。インタラクションのシミュレーション機能を持つプロトタイピング作成アプリによって作られることも多いです。CSSのフレームワークを利用して、HTMLとCSSによって構築することもできます。 BootstrapとFoundationが、現在存在しているプロトタイピングのツールの中ではおそらく主流です。有名ブランドのイメージがあればそれを使うべきですが、ストックイメージでも足りるでしょう。ストックタイプのUIエレメントは、模作のインターフェイスをより速く構築するために使われます。プロトタイピング作成アプリの多くは、これらのUIエレメントのライブラリを持つことが多く、作業の高速化に役立ちます。ミディアムファイプロトタイプは、リテラル思考型(Literal thinker:全体的なイメージよりも、具体的なステップや言葉の定義から考えるような人)で外観や動作の近似を見たいと思うような人に向いています。彼らにとっては、「未完成」のヘッダーの方が、Webサイトのヘッダーに全く見えないようなスケッチ風の代物よりも、まだ耐えられます。リテラル思考のクライアントには、ワイヤーフレームで素早く考えた初期のアイデアを見せる必要はないでしょう。ミディアムファイプロトタイプの段階で見せる方が、彼らに方向性を分かってもらいやすいです。 4. ハイファイプロトタイプこの段階までプロジェクトが進むと、全てのスクリーンのモックアップが完成していて、全てが立派なものになっているでしょう。製品をバックエンドのコードと統合して、人々に製品の動作性を見てもらう時です。ハイファイプロトタイプは通常、デザインに関する最終的な合意をクライアントと結ぶために使われます。ただのPSDファイルを送るだけれはなく、インタラクティブなものを提示しなければなりません。 2つの方法のうちいずれかによって行われます。1つの方法では、静的なHTMLとCSSを利用して、一部をインタラクティブな外観に仕上げます。もう1つの方法では、画像やPSDのファイル形式をインポートできるアプリを利用して、擬似インタラクティブな特性を加えることで完成品のアプリ（製品）の機能を模倣します。アプリによっては、プロトタイプのデモをWeb上(またはモバイルデバイス上)で行うことも可能です。プロトタイピングのメソッドプロトタイプの主な種類を見たところで、次にプロトタイプを実際に作るためのツールをご紹介します。基本的な使い方も含めてすでにほとんどご紹介していますが、さらに詳細を見てみましょう。あなた自身とクライアント双方にとって適合するメソッドを選びましょう。ビデオまたはプレゼンテーションのプロトタイプこれらは具体的な作業がなされる前に、アイデアを売るためによく使われます。そのため通常は、潜在的な投資家を意識したものです。クライアント向けにも使えますが、他の代替手段の方が効率的なコミュニケーションを図るには優れていることも多いです。アドバンテージは人によって異なるでしょう。ビデオとプレゼンテーションのプロトタイプで、利益率を上げるために作られたものは商業型の公式に従います。聴き手が共感できる問題を提示する。あなたの製品によってその問題がどのように解決されるかデモを示す。 (オプションとして)会社のマスコットをデジタル形式で表現して、キャッチフレーズを叫ばせながら楽しそうにダンスさせる。これらのプロトタイプの中にはアイコン、テキスト、イラストレーションを使うだけで完成するものもあります。他にはアニメーションを利用して、要点を説明するのに動きを使うこともあるでしょう。あなたのアイデアを売ることができれば、正しく使いこなせているといえます。ビデオのプロトタイプと紙のプロトタイピングを組み合わせた良い例をご紹介します。Video Prototype for Mobile Cooking App : Youtube動画よりワイヤーフレームワイヤーフレームは紙面上かアプリにおいて作成できます。ワイヤーフレームは通常ローファイプロトタイプと見なされていますが、時間をかければミディアムファイプロトタイプにアップグレードすることも可能です。もっとも労力をかけるだけの価値はほとんどありませんが。ワイヤーフレームは、作成されるのも破棄されるのも速いです。紙面上でワイヤーフレームを作成することが魅力的である理由の1つです。アプリでワイヤーフレームを作ると、より正確なデザインが可能となり、既存のワイヤーフレームから簡単に編集することもできます。しかし、あなた自身以外には誰も見ないであろうスケッチを速く作成できるという点が、やはりワイヤーフレームの長所として一番優れています。しかし、すで述べたようにアプリでワイヤーフレームを作成すると、より簡単にインターフェースの機能を模倣できるというメリットもあります。紙面上に作成したワイヤーフレームをタップしたところでトントン音が鳴るだけですから、面白いかもしれませんが、あなたの意図するところを伝えることはできません。紙のプロトタイプこれはただのスケッチではないという点で、紙面上のワイヤーフレームとは異なります。紙を利用するのは、物理的でフラットな素材でインターフェースのモデルを作るためです。先にご紹介したビデオのプロトタイプにもその例を見ることができます。インターフェースの要素は、紙にスケッチして、カットして作ります。コピーして予備を作ることもあります。そして作ったピースを他の紙の上に集めます。ある要素のサイズが間違っていれば、他の要素の並びを変えたり、新しいサイズの要素を紙をカットして作るなどの方法があります。またワイヤーフレームより「本物」らしいといえます。特に面白さはないとしても、クライアントは紙のモデルを触ることができます。この触覚に訴える方法はクライアントに多くを説明できるので、他のどんな方法より優れていることもあります。誰でも対象をより深く理解するためには、物理的なコンタクトが必要です。UXデザインの半分は、物理的なインタラクションの使い心地を、デジタルのインターフェースで作り直す作業であるといえます。アプリで作成するミディアムファイおよびハイファイプロトタイプこれらは紙のプロトタイプとの共通点が多いです。以下でご紹介するInvisionなどのアプリで作成するプロトタイプは、あらかじめデザインしたインターフェースの要素をもとに作り始め、これらのピースを集めて完成品を模倣します。異なる点は、全ての作業がスクリーン上でなされることです。完成製品のグラフィック作成やブランド化も可能であり、プロトタイプであっても完成製品のように作成することができます。その次はすでに述べたことですが、アプリによって製品のデモをブラウザやモバイルデバイス上で行うこともできます。また手で触れて感じることも可能になります。クライアントの触覚に訴えることで、もし気に入ってもらえれば、最終的な承認を得たも同然です。コードもちろんインタラクションを必要とする場合には、インターフェースのプロトタイプをコードで作るのがいい方法です。その理由もご紹介します。あなたのワークフローによく合う(とにかくブラウザ上でデザインするような場合)。作成するサイトやアプリに、ボタンなどのインタラクティブな要素が多数存在している。製品作成の最終段階でプロトタイプのコードを利用すると、時間の節約になる。インターフェースの機能性のデモを、アプリを使わずにブラウザ上で実行したい。あなたがキーを押すのが好きで、クリックするのは嫌いである。ブラウザ上でプロトタイピングを行うと、特に修正版を作成中はやや時間がかかります。製品の初期段階ではおすすめしません。ミディアム～ハイファイプロトタイプで使うのがベストです。すでにHTMLやCSSで作業を進める方法を好んでいるとしたら、完成間近のプロジェクトを提示するには最良の方法の1つです。フレームワークによるプロトタイピングフレームワークを利用すると、コードを使ったプロトタイピングのスピードを相当上げてくれます。さらに、完成製品用のフレームワークを利用するとしたら、コーディングの量も少なくて済みます。補足として、BootstrapやFoundationのような人気の高いフレームワークを利用して構築された、ドラッグ＆ドロップ形式のWebページ用エディタもあります。これらを使うことで、ローファイプロトタイプからコードを加えた完成製品まで全て作ることができます。または、これらをプロトタイプを速く作る目的だけに使い、プロジェクトの最終段階ではカスタマイズしたコードを使う方法もあります。どちらの方法でも上手くいくでしょう。プロトタイピングのツールとアプリ理論を理解したところで、プロトタイプの作成に進みましょう。紙のプロトタイプやコードだけに限定せず、アプリをどこかで使うと仮定します。良くも悪くも、多数の優良なアプリから選ぶことになります。繰り返しになりますが、結局はあなたに合うものを選ぶことが大切です。モバイルアプリのデモを実行する機能が必要か？Google DriveやDropboxなどのサービスとファイルの同期が必要か？Githubと統合させるか？ローファイ、ミディアムファイ、ハイファイのどのタイプか？アドバンストスクリプト言語(Advanced scripting)か？などから考えましょう。以下にリストアップするアプリは、これらのニーズに対応しています。何に着目すべきか分かりやすいように、アプリごとに最も関連性の高い機能をご紹介します。これらアプリの多くは主にワイヤーフレームのためのツールとして知られています。ワイヤーフレームのソフトウェアは、インタラクティブなプロトタイプに必要な機能を備えていることが一般的です。人によってこれらのアプリを使うことで得られるアドバンテージも異なります。 AdobeのExperience Design CC 現時点では最新のアプリです。このアプリの登場により、今まで飽和状態だった市場に競争を巻き起こすことになりそうです。単にワイヤーフレームのアプリまたはプロトタイピングのアプリというよりも、デザインアプリです。Sketchや開発終了したFireworksと似ていますが、デザインした全てのものからプロトタイプを作り出すことが可能な点が斬新です。今のところMacのプレビューにのみ対応していますが、2016年末までにはWindows版もリリースされる予定です。プレリリース版は無料ですが、完成版のリリース後にはAdobe Creative Cloudのプランに組み込まれます。プレゼンテーションのソフトウェア MicrosoftのPowerPoint、AppleのKeynote、LibreOfficeのImpress、GoogleのSlidesは全てプロトタイプの作成に使えます。プロトタイプについてのコンセプトはそれぞれ異なっています。スライドにリンク機能を加えるだけで、インタラクティビティを模倣できます。コンテンツ中心型のWebサイト用のプロトタイプにも向いています。またこの中のソフトの少なくとも1つは使った経験のある人も多いでしょう。もし使ったことがなければ、ImpressとSlidesは無料で使えます。 InVision InVisionも有名なアプリの1つで、ハイファイプロトタイピング向きです。バージョン管理を特色としていて、リアルタイムの連携機能やフィードバック機能を売りとしています。Marvelのアプリのように、アニメーション、プロトタイプの組込み、デバイス上でのデモ、などの機能もあります。無料プランではプロトタイプ1つまで作成できますが、それ以降は有料プランで月額15USドルかかります。 InVision Justinmind Justinmindはアプリケーションのハイファイプロトタイプを作成するのに向いているように思えます。JustinmindのサイトではレスポンシブデザインのWebサイトのプロトタイプについても言及されています。アプリ上でのデモ機能もあります。今のところ1年間の有料契約(月額換算で19USドル)からスタートできます。 Justinmind Marvel Marvel Appは有名なプロトタイプのアプリです。基本的に無料プランで、アップデートの価格も全てリーズナブルです。注目の機能は、PhotoShipとSketchのサポート、DriveとDropboxとの同期、Webページ上での組込み型プロトタイプです。これらの機能によって、プロトタイプをアニメーション付きのプレゼンテーションに仕上げることもできます。ハイファイプロトタイプの作成に向いています。 Marvel Proto.io Proto.ioはハイファイプロトタイプ向きのアプリです。複合的なインタラクション、アニメーション、ファイル形式のエクスポート、印刷、組込み、デバイスのデモンストレーションなどの機能が全てビルトインされています。15日の無料お試し期間と、月額24USドルのプランから始められます。 Proto.io POP POPが他のアプリと異なっているのは、ワイヤーフレームのスケッチとデジタル形式のプロトタイプのハイブリッドを作成できる点です。 iPhone、Androidフォン、Windowsフォンなどのカメラでスケッチの画像を取り込み、これらをインタラクティブなプロトタイプに変換します。主に紙で作業を進めるタイプの人には、データを共有するのにいいアプリです。プロジェクト2つまでは無料で利用可能で、以降は月額10USドルの有料プランになります。 POP Flairbuilder Flairbuilderはデスクトップアプリですが、プロジェクトにオンラインのビューア(閲覧用ソフトウェア)機能を利用できます。ミディアムファイのワイヤーフレームとプロトタイプに向いています。インタラクションを追加したり、デバイス上でのデモを行うことが可能で、グリッドベースのデザインにも特色があります。ワンタイム料金で99USドルと高額ですが、Axureよりも安いです。 Flairbuilder Flinto Flintoには、Macアプリ版とWeb用ライト版の2つのバージョンがあります。違いはというと、Macのバージョンの方がより複雑なアニメーション、インタラクションなどの機能をテーブル(表)に加えることができます。またSketchからファイル形式をインポートできるのも、Web用ライト版にはない機能です。ワンタイムの購入価格で99USドルかかります。ライト版(月額20USドル)だとデスクトップバージョンのライセンスも含まれるので、両方の良い部分を利用できます。 Flinto [お知らせ]TechAcademyでは初心者でもUI/UXデザインができるようになるUI/UXデザインオンラインブートキャンプを開催しています。現役UI/UXデザイナーのサポートで学びたい場合はご参加ください。

アプリデザイン

Photoshopでレイヤーを結合する方法を現役エンジニアが解説【初心者向け】

Photoshopでレイヤーを結合する方法について、TechAcademyのメンター（現役エンジニア）が初心者向けに解説します。なお本記事は、TechAcademyのオンラインブートキャンプPhotoshop講座のカリキュラムをもとに執筆しています。田島悠介今回は、Photoshopに関する内容だね！大石ゆかりどういう内容でしょうか？田島悠介レイヤーを結合する方法について詳しく説明していくね！大石ゆかりお願いします！目次レイヤーの定義と種類レイヤーを結合する方法全てのレイヤーを結合する方法まとめレイヤーの定義と種類レイヤーとはレイヤーとは、透明なシートに絵を描いて、それを何枚か重ねることで全体の絵を完成させていくイメージで使われる、PhotoShopの基本的なツールです。 PhotoShopでは、デジタルの利点を最大限に活かして、レイヤーごとに画像や文字を編集するのが基本的な方式となります。例えば、こちらの画像では、海の画像とヨットの画像が別々のレイヤで用意してあり、いつでもヨットの表示・非表示を切り替えることができます。レイヤー操作パネルレイヤーは次のようなパネルで操作することができます。 1行が1レイヤとして扱われ、選択中のレイヤ以外はカンバス上でクリックしても反応しませんから、誤操作を気にすることなく決まった画像や被写体の編集に集中することができます。また、目のアイコンをクリックすることで、レイヤーの表示・非表示の切り替えができますので、２つの被写体が重なっている部分でも簡単に編集が可能です。レイヤーの種類 PhotoShopのレイヤーには様々な種類があります。代表的なレイヤーをこちらの表でご確認ください。レイヤーの種類説明画像レイヤー（通常レイヤー）画像を編集するための最も基本的なレイヤー背景レイヤー画像に対して1つだけ設定できる背景用のレイヤー調整レイヤーそれ自身は見た目の情報を持たず、他の画像に対する視覚調整効果を保持したレイヤー文字レイヤー文字情報を表示させるためのレイヤー。PhotoShopでは、文字は画像と独立したレイヤーとして扱いますシェイプレイヤー図形などのシェイプ情報を持ったレイヤーレイヤ構成のサンプル冒頭のサンプル画像は、4つのレイヤーで構成されています。こちらの絵で、どんなレイヤ構成になっているか確認してみましょう。海の画像とヨットの画像は別のレイヤで管理されており、ヨットのレイヤーを海のレイヤーの上にオーバーレイさせています。ヨットの絵はわかりやすくするために背景に色がついていますが、実際は背景が透明のため、下の海の画像が見えるようになっています。調整レイヤは、指定領域だけ海の画像の視覚効果を暗めの色で付与しています。実際は、レイヤそのものはすべて透明で、見た目の情報を持ちません。画像の上にオーバーレイさせた時だけ、画像に非破壊的に視覚効果を付与させることができる、特殊なレイヤです。文字レイヤは、見た目の通り、文字を管理するためのレイヤです。わかりやすく色を付けておきましたが、実際は白に近い色です。 [PR] Webデザインで副業する方法とはレイヤーを結合する方法レイヤー結合の方法レイヤーは、以下の方法で結合できます。 PhotoShopにおけるレイヤー結合操作レイヤーを複数選択する　＞　右クリック　＞　レイヤーを結合レイヤーを複数選択するには、レイヤーパネル上で、Ctrlキーを押しながらレイヤーの行を複数クリックします。レイヤー結合は、絵が描かれた複数枚の透明なシートを接着剤で1つにまとめるイメージですので、レイヤーの数が減ってスッキリします。レイヤー結合の注意点レイヤーは、結合すると元に戻せませんので、複数レイヤを一つの画像にまとめて問題ない場合に結合操作を実行しましょう。また、結合時に「非表示状態」の（目のアイコンが表示されていない）レイヤーは、結合後に情報が消失してしまいますので、十分注意してください。レイヤーのリンク 2つ以上のレイヤーを同時に移動させたい、位置関係を維持して編集したい場合には、「レイヤーのリンク」コマンドを使いましょう。操作方法は、「レイヤーを結合」とほとんど変わりません。右クリックメニューで「レイヤーのリンク」を選択すればOKです。こちらは目的の作業が完了した後に、リンク状態を解除して元に戻すことができます。全てのレイヤーを結合する方法画像の統合作業が全て完了して、レイヤーをすべて結合して一つの画像としてまとめたい場合には、「画像の統合」を実行します。 PhotoShopにおける画像の統合操作任意のレイヤーを右クリック　＞　画像を統合この操作により、すべてのレイヤーが一つの背景レイヤーとして統合されます。まとめ PhotoShopを使いこなす上で、レイヤーの操作は必須となります。結合時にレイヤーが消失してしまわないよう、気を付けて操作を実施していきましょう。監修してくれたメンター寺谷文宏 ( Teratani Fumihiro ) WEBアプリケーションエンジニアとして数多くのプロジェクトを経験し、フロントエンドからサーバーサイドまで総合的な開発を得意としています。万能なエンジニアとしてWEBデザインにも詳しく、WEB素材をIllustratorやPhotoshopにより制作することができます。 TechAcademyではフロントエンド、Javaコースを担当。大石ゆかり内容分かりやすくて良かったです！田島悠介ゆかりちゃんも分からないことがあったら質問してね！大石ゆかり分かりました。ありがとうございます！ TechAcademyでは初心者でも1週間でフォトレタッチをマスターできるオンラインブートキャンプ Photoshop講座を開催しています。現役デザイナーに毎日チャットで質問することができます。

Photoshop

要件定義書の作成手順を学ぶ！アイデアを形にするプロセスとは

本稿は、Smashing magazineのブログ記事を許可を得て日本語翻訳し掲載した記事になります。本記事は、モバイルアプリ開発の会社のCEO Eduard Khorkov氏によって投稿されました。なぜ要件定義書を書くのでしょうか。仮にあなたがモバイルアプリをプロデュースしたいと思っていながら、プログラミングスキルがないとします。そのためあなたは、アプリを作成することができる開発者を見つけ、その人にアイデアを説明します。最初に開発者にアプリを見せてもらったとき、意外にもあなたが望んでいたものと違うのに気付きます。なぜでしょうか。それはアイデアを説明するときに充分な説明がされていなかったからです。このような事態を防ぐため、アイデアを形式化してはっきりした姿にする必要があります。そのための一番の方法は要件定義書を書き、開発者と共有することです。要件定義書は開発プロセスの結果をあなたがどのように見ているかを示し、それによってあなたと開発者は同じ認識を持つことができます。この記事では要件定義書を作成するための最も一般的な方法を説明します。モバイルアプリケーションの要件定義書を書くための基本的な手順と、良い要件定義書はどのようなものなのかを学びます。どのように要件定義書作成に着手するか入念に作成された要件定義書は、不明確な点を排除し、開発者が何をするべきかをはっきりとさせます。さらにその文書は作業の範囲を明確にし、開発者は必要な時間と労力を見積もることができます。どのように文書を作成するのでしょうか。以下は、要件定義書を作成する際に守るTIPSです。 1. 総括的なアイデアを説明するアイデアに関する適切な説明は1つの文でまとめることができます。その文章にはアプリケーションの中心となる機能が書かれており、読んだ人はアプリケーションの内容をすぐに理解することができます。例えば、カロリー・トラッキングを行うモバイルアプリケーションの場合なら「カロリー消費量を統計分析して体重を気にする人を支援するアプリ」という風にすることができます。 2. 順番を考えるナビゲーションの基本パターンを学び、そのアプリケーションについてユーザーが実際に体験する順番通りに説明します。アイデアの要素が完成したら、オンボーディング画面やユーザー登録などアプリケーションの最初の手順を説明します。続いてアプリケーションのホーム画面などの部分に進みます。文書を読んだ人は、実際にユーザーがどのように操作を進めるかということを理解することができます。プライバシーポリシーや「パスワードを忘れたとき」などの基本的な機能や画面のことを忘れないようにしましょう。 3. 既存のアプリケーションを調査する App StoreとGoogle Playの既存アプリケーションを調べて、アプリの説明の際に参照してください。アプリAとアプリBの「パスワードを忘れたとき」機能が好きな場合は、それを文書内で説明します。 4. 細かい部分は省くアプリケーションの機能に焦点を合わせ、ボタンの色などの詳細は省略します。ほとんどのユーザーは細かい所を気にしません。ユーザーにとって関心があるのはそのアプリケーションが問題を解決するのに役立つかどうかです。要件文書を作成するときは、ユーザーがアプリで何ができるかということに集中して書いてください。 5. 機能の優先順位を決めるどの機能が他より重要かを伝えることで開発者は最初に何に焦点を当てるべきかを知ることができます。「Must（必須）」、「Should（推奨）」・「Could（可能）」・「Won’t（先送り）」のMoSCoWメソッドに従います。 6. テキストをワイヤーフレームで補うアプリケーション画面のワイヤーフレームを作成し、テキストに添付します。4つ以上のワイヤーフレーム画面がある場合、マップを作ると効果的です。この記事の後半でスクリーンマップについて説明します。要件定義書のフォーマット要件を記述する方法が分かったら、ドキュメントの適切なフォーマットを選びましょう。モバイルアプリの要件を記述するための基本的なフォーマットとして機能仕様書（FSD）・ユーザーストーリー・ワイヤーフレームなどがあります。機能仕様書（FSD） FSDはおそらく、ソフトウェア開発業界においてデフォルトのフォーマットです。製品が何をするべきか、どのようにするべきかを取り扱う標準的な項目リストで構成されています。簡単な電卓アプリケーションを例として、その機能をFSDで説明してみましょう。アプリケーション画面には基本的な算術計算ボタン(加算・減算・乗算・除算)と結果ボタン(「＝」で示されている)が追加されたデジタルキーボードが表示されます。数字ボタンをタップすると、その内容が画面内のディスプレイ部分に表示されます。新しい桁の数字は右側に追加されていきます。算術計算ボタンをタップすると、現在ディスプレイ部分に表示されている数字がメモリに与えられます。また、次の数値入力のためにディスプレイ部分はクリアされます。結果ボタンをタップすると、それまでの操作に従ってメモリ内の数値と表示されている数値が結合されます。結果の数値がディスプレイ部分に表示されます。このように機能仕様書のフォーマットでは、開発とビジネスの両方で使用されるため製品の詳細な説明が書かれています。そのため皆が同じ認識を持つことができます。 FSDを作成する人は、ソフトウェア開発の経験が豊富で構築しているモバイルや他のプラットフォームの仕様を知っている必要があります。また、要求される詳細レベルが高いため、完成させるのにはかなりの時間がかかります。ユーザーストーリーユーザーストーリーはFSDほど正式なものではありませんが、強力なフォーマットです。ユーザーがアプリでできることをリストにし、ユーザー観点から記述します。この文書ではユーザーがなぜそれをしたいのかを簡単に説明します。電卓の例で、いくつかの機能を追加しユーザーストーリーで説明してみましょう。ユーザーとして、非常に小さい数値や非常に大きな数値を取り扱うために10進数から指数関数に（またはその逆も）数値の表記を変更できるようにしたいと思っています。ユーザーとして、同僚と共有するために計算の履歴をPDFファイルで出力したいと考えます。この形式は技術的な要件の概要だけでなく、優れた投資対効果検討書も生み出します。そのため、ビジネスにとって重要でない機能が特定されている場合はその機能を取り除くか、将来のリリースに先送りにするかを決めることができます。ユーザーストーリーのフォーマットを利用すると、1つのストーリーから複数のサブストーリーに分割して詳細を定義することができます。例えば、PDFエクスポートのストーリーから以下のように分割することができます。ユーザーとして、画面の右上にある共有ボタンをタップしてオプション（PDF・テキスト・画像で共有）を表示させたいと思っています。共有オプションを選択したときに、iOSのDate Pickerを使用して共有される計算のタイムフレームを選択したいです。ユーザーストーリーは簡単で柔軟性があるため、最も便利で一般的なフォーマットのひとつになっています。スケッチとワイヤーフレームアプリケーションの要件を説明する他の方法は、スケッチあるいはワイヤーフレームでそれらを視覚化することです。 iOSの開発では、開発期間の約70％がインターフェイスの実装に費やされるため、すべての画面を目の前に置いておくことで何をするべきであるのかという作業の範囲が分かるようになります。モバイルアプリケーション用の適切なワイヤーフレームセットを作成するためには、画面を相互にリンクする方法・各画面に表示できる状態・プッシュ通知から開いたときにどのように動作するかというユーザー体験の基本を知っておく必要があります。フォーマットを融合させる適切に融合することでそれぞれのフォーマットの強みを生かすことができます。私たちの経験では、ユーザーストーリーとワイヤーフレームを混合させることが最も理にかなっています。ユーザーストーリーはアプリケーションの機能を説明し投資対効果検討書を規定しますが、ワイヤーフレームはこれらの機能がアプリケーションの画面にどのように表示されるかを示します。さらにユーザーストーリーとワイヤーフレームを混合させるのはFSD作成よりも時間がかからない上に、その相互作用の詳細と説明はすべてまとめられた状態になります。まず、アプリケーションのワイヤーフレームをスケッチすることから始めましょう。ワイヤーフレームが完成したら各画面に2つ以上のユーザーストーリーを追加し、ユーザーがその画面上で何ができるか説明します。私たちはこの方法がモバイルアプリケーションの開発に最も適していることを発見しました。 [PR] Webデザインで副業する方法とは練習してみましょう What I Eatアプリケーションを例として取り上げます。アプリケーションを一から開発しているというシチュエーションで要件定義書を作成してみましょう。まず、スティーブ・ブランクのXYZパターン「ZによってXがYするのを支援する」を使ってアイデアを形にしてみます。そのアプリケーションの前提はユーザーが一日に食べるものとカロリー摂取量をコントロールできるようにすることです。XYZメソッドで置き換えると「What I Eatアプリケーションは、簡単な食事履歴の機能によって体重を気にする人がカロリー消費をトラッキングするのに役立ちます」となります。前述の通り、ユーザーストーリーとワイヤーフレームを融合させるのが一番効果的です。次にWhat I Eatアプリのユーザーストーリーを各画面ごとに記述します。まずアプリケーションの開始・ホーム画面から始めましょう。ユーザーとして、アプリを開いてすぐに今日の食事の記録と消費カロリーを見たい。今食べた食事とそのカロリーを、すぐに追加したい。アプリ内のカレンダーにアクセスして、それまでの履歴を表示したい。あいまいさを回避するために、この画面のワイヤーフレームを作成します。ホーム画面に「新しい食事を追加」機能を入れることはできませんでした。代わりに、この機能を行う別の画面に移動するためのボタンを付けます。ここで、この新しい画面についてのユーザーストーリーをまとめます。今食べた食事の名前を入力したい。そのカロリーも入力したい。ホーム画面にはカレンダーを開くボタンがあります。色々なカレンダーアプリがあるので、まずそれらのデザインをチェックするといいでしょう。iPhoneのデフォルトカレンダーアプリがお気に入りなので、ここではそれを参考にします。ユーザーとして、今日の日付をすぐに選択したい。日付を選択すると、iPhoneのカレンダーアプリのようにその日の食事のリストが表示されるようにする。次の月、または前の月に切り替えられるようにする。 iPhoneカレンダーのユーザーインターフェイスをワイヤーフレームに配置します。最後に、アプリにいくつかの設定を追加する必要があります。食事記録のためのiCloudバックアップの有効・無効を切り替えたい。カロリー摂取量をトラッキングするリマインダーの有効・無効を切り替えたい。これで、ほぼ完了です。最後のステップではワイヤーフレームとユーザーストーリーをひとつのドキュメントにまとめ、各ワイヤーフレームとそれぞれのストーリーを配置します。さらに、それぞれの画面がどのように繋がっているかを視覚化するマップを描くこともできます。マップを作成している際に設定画面に移動するボタンがないことに気付いたため、ホーム画面に追加します。まとめここでは、ユーザーストーリーとワイヤーフレームを含むPDFと、それを補完するスクリーンマップを作成しました。これらによってアプリケーションに必要とされている機能が詳細に説明できます。これで要件定義書を開発者に送ることができる状態になります。今度は、開発者の作成したアプリケーションはあなたの思っていたものになるでしょう。一般的に言えば、要件定義書を書くことはあなたのビジョンを他のチームに伝えることです。上記の方法だけに限定せず、自由に試みて一番いい解決方法を見つけてください。 TechAcademyでは初心者でも最短4週間でオリジナルWebサイトを公開できるWebデザインオンラインブートキャンプを開催しています。現役のWebデザイナーがパーソナルメンターとして受講生に1人ずつつき、マンツーマンのメンタリングで学習をサポートし、最短4週間でオリジナルWebサイトを開発することが可能です。独学に限界を感じている場合はご検討ください。

Webデザイン

これだけは知っておきたい！Photoshopのレイヤー操作の基本

Photoshopの基本中の基本となる「レイヤー操作」について初心者向けに解説した記事です。 Photoshopのファイルはレイヤーという透明のフィルムが何枚も重なっている状態で管理されています。背景・オブジェクト・文字などのレイヤーを分けることによって、それぞれ違う描画モードを設定したり、他のレイヤーの情報に影響を与えずに画像を編集できます。 (※今回の作業はすべてAdobe Photoshop CCのバージョンで行っています。) 目次Cacoo（カクー）moqupswireframe.ccPrototypermockingbirdPOP 大石ゆかり田島メンター！！今日はレイヤーについて教えてください。田島悠介 Photoshop内の透明なフィルム、その1枚1枚をレイヤーというんだ。各レイヤーにはそれぞれ「描画モード」というものを設定することができるようになっているよ。大石ゆかり「描画モード」ですか？田島悠介レイヤー内の要素を、画像全体の中でどのような合成方法で使用するかという機能なんだ。試しにレイヤーを作成してモードを変更してみようか。レイヤーの「描画モード」レイヤーには様々な種類が存在します。今回はいくつか基本的なものを紹介します。田島悠介レイヤーを新規作成すると「通常」の状態で作成されるよ。また、レイヤーの描画モードはいつでも変更可能なんだ。大石ゆかりずいぶんたくさん種類がありますね！でも、これだけあると何を使っていいか分からなくなりませんか～？田島悠介各モードをクリックするとその場で画像に反映されるので、画面を見ながらどれを使ったらいいか考えることもできるからね。よく使う描画モードについて見てみよう。例として、背景のレイヤー0の上に、もみじの葉以外の部分が透明の状態になっているレイヤー1があるとします。このレイヤー1にいくつかの代表的な描画モードを設定してみましょう。描画モードは赤枠の部分をクリックすることで変更が可能です。描画モード「通常」初期設定されている描画モードが「通常」です。上のレイヤーにあるものが優先して表示され、透過の部分は下のレイヤーが見えます。描画モード「乗算」下のレイヤーの色と上のレイヤーの色を掛け合わせ、色が暗くなる演算を行います。どんな色でも黒と掛け合わせると演算結果は黒になります。逆にどんな色でも白を掛け合わせると変化はありません。描画モード「スクリーン」下のレイヤーの色と上のレイヤーの色を掛け合わせ、色が明るくなる演算を行います。描画モード「乗算」の時とは反対に、どんな色でも白と掛け合わせると演算結果は白になります。逆にどんな色でも黒を掛け合わせると変化はありません。レイヤーの「不透明度」各レイヤーには不透明度を設定できます。初期設定では100％になっており、数値を下げると下のレイヤーが透けて見えるようになります。以下は、文字ともみじのレイヤーの透明度を50％に、描画モードを通常に設定しています。 [PR] Webデザインで副業する方法とは背景レイヤー背景レイヤーという、透明ピクセルの存在しない特殊なレイヤーがあります。このレイヤーは最背面に固定されており、描画モードや不透明度を設定できません。背景レイヤーは通常のレイヤーへ変更することが可能です。背景レイヤーを右クリックし「背景からレイヤーへ」を選択します。レイヤーから背景へ変更する場合は、背景に変更したいレイヤーを選択した状態で、上メニューの「レイヤー」→「新規」→「レイヤーから背景へ」を選択します。すると、レイヤー内の透明部分が背景色で塗りつぶされ、最背面に固定されます。用途に合わせて使い分けてください。レイヤーの新規作成・複製・削除最後にレイヤーの新規作成・複製・削除といった基本操作を紹介します。レイヤーを新しく作成する場合は、このアイコンをクリックします。レイヤーを削除する場合は、削除したいレイヤーを選択した状態でこのアイコンをクリックします。 (レイヤーを右クリック→「レイヤーを削除」でもOKです。) また、レイヤーを右クリックして「レイヤーを複製」を選択すると、同じレイヤーを新たに作成できます。この時、複製されるレイヤーは描画モードや不透明度も元のレイヤーと同じ状態で作成されます。今回の記事は以上です。田島悠介レイヤーの複製や削除もよく使う機能だから覚えておこう。大石ゆかりちなみにレイヤーを分けると、具体的にどんないいことがあるんですか？田島悠介例えば文字と画像、それぞれの不透明度を別にしたり、背景部分にだけフィルターを適用したりすることが可能になる。しかも別レイヤーに分けておくことによって、好きなときに変えたい箇所だけを調整することができるよ。大石ゆかり画面内の要素によって、いろいろなレイヤーを使い分けるのが大事なんですね。よく分かりました！ Photoshopを学習中の方へこれで解説は終了です、お疲れさまでした。 Photoshopを調べたけど分かりづらい副業や転職後の「現場で使える」知識やスキルを身につけたい Photoshopの学習や情報収集をしていて、このように思ったことはありませんか？テックアカデミーのPhotoshop講座では、第一線で活躍する「プロのWebデザイナー」が教えているので、効率的に実践的なスキルを完全オンラインでしっかり習得できます。合格率10%の選考を通過した、選ばれたWebデザイナーのチャットサポートを受けながら、初心者でもフォトレタッチをマスターできます。

Photoshop

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] Webデザインで副業する方法とは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デザイン

「かわいい！」を感じさせるデザインのWebサイトまとめ

webデザインでかわいいを表現するというのは、とても難しいと思います。そんなデザインで悩んだ時に参考になるサイトを紹介したいと思います。女性向け・子供向けのサイトを作りたいと考えている人には参考になるはずです。なお本記事は、TechAcademyのWebデザインオンラインブートキャンプのカリキュラムをもとに執筆しています。 Beautylabo Beautylabo ピンクベースの配色にふわっとしたフォントで見事にかわいいを表現しています。ターゲットとしている若い女性に受け入れられるかわいいデザインと言えるでしょう。じゃらし系キャラクター「ぶくぶくあわー」ブクブクアワーこのサイトに行くと真ん中のキャラクターがトコトコ歩きます。キャラクターだけではなく配色フォントにも思わずかわいいと言ってしまうようなサイトです。 [PR] Webデザインで副業する方法とは株式会社ブラン株式会社ブラン「かっこかわいい」とはまさにこれです。ドットで表現された可愛さの中に、動きでかっこよさを出している非常にクオリティの高いサイトです。 ELPH’S CIRCUS ELPH’S CIRCUS キャラクターグッズの世界観を見事に表現したかわいいwebサイトです。キャラクターの可愛さとテーマパークのような配色で見ていて楽しいサイトとなっています。 SCRAP SCRAP バナーの可愛さが際立つサイトです。かわいい背景にかわいいバナーにかわいい色使い。かわいいがつまったサイトになっています。 DESIGN YOUR HEADPHONE DESIGN YOUR HEADPHONE ヘッドフォンとイヤホンで作られたトップ画像が目を引くかわいいサイトです。製品のデザインのセンスの良さがわかる素敵なレイアウトだと言えます。どすこいまげニャンどすこいまげニャンキャラクターを紹介しているサイトです。一目見てかわいいだけではなく、ボタンのわかりやすさ、押しやすさにも、配慮され、クオリティの高いサイトと言えるでしょう。パティスリーコンセントパティスリーコンセント女性がターゲットで、ナチュラルカラーでシックにまとめ上げています。コンセプトが「かわいい」だけあって、かわいいのはもちろん、年齢層を問わないオシャレさもありますね。手芸センタードリーム手芸センタードリーム明るい黄緑と黄色のカラーが、優しくて元気な印象を与えます。手芸のイメージでコンテンツに刺しゅうの素材を用いる気遣いが、温もりを感じさせるかわいいサイトに仕上げています。ダイハツポートダイハツポート強烈な印象でありながらかわいい車のフォルムを強調した、明るくてPOPな印象。若い女性がターゲットですが、商品をチープに見せないためにシメの黒をうまく使っています。白鶴-ぷるぷるスパークリングゼリー白鶴-ぷるぷるスパークリングゼリー渋い白鶴のイメージを払拭して、若い女性をターゲットにしたカラフルな色使い。特別にかわいい素材を使っていないのに、フリーハンド状の円のアニメーションがユルい印象でかわいさを強調しています。ドミノアンティークドミノアンティーク中年層以上のアンティークに興味がある人のサイト。高級イメージではなく、アンティークの親しみに安さを強調しながら、丸いフォルムで商品写真を配置。ほのかな「かわいらしさ」を感じます。きらむぎきらむぎナチュラルイメージがやわらかさを出し、健康志向の人が注目するように配慮されています。手描きのコンテンツが、とにかくかわいい。トップページが曲線で構成されている事に注目したいですね。たかしま農園たかしま農園ターゲット問わずの、トマトのイメージを強烈に印象づける色使いが斬新。かわいさを強調しているのは、手描き風のフォントの選択です。農園で働く人の一生懸命さを表しています。学校法人百華学園精華幼稚園学校法人百華学園精華幼稚園小さい子供を持つ親がターゲット。楽しく優しいイメージを、やわらかいピンクを主体に色数を抑えて表現。過度な動画は使わず、トップページをスクロールなしで見せる配慮も参考にしたいところです。資生堂-インテグレート資生堂-インテグレート背景の強烈なピンクが刺激を与えながらも、ハートのコンテンツとイメージ写真で、若い女性のための商品である事が一目瞭然のサイト。やわらかさがなくても「かわいい」を表現できる例だと言えます。 Acorn-Style* Acorn-Style* コンセプトが「オシャレかわいい」、若い層から中高年の女性がターゲット。ナチュラルなイメージは、手描きのコンテンツを中心にするのでかわいい物が多いですね。色使いも優しいのが、かわいらしさを引き立てます。今回はかわいいwebデザインのサイトを紹介しました。デザインに困った際参考になるサイトばかりですので、一度目を通してみてはいかがでしょうか。かっこいい！を感じさせるサイトもまとめています。併せてご覧ください。 [お知らせ]TechAcademyでは初心者でも8週間でオリジナルWebサイトを公開できるWebデザインオンラインブートキャンプを開催しています。自分でサイトのデザインをしたい方はぜひご覧ください。

Webデザイン

記事を検索

ニュース

インタビュー

テクノロジー

キャリア

お問い合わせ

初心者でも使える6つ厳選！無料でワイヤーフレームを作成できるツール

Cacoo（カクー）