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

コラム

実は私も！？独学で損する人の特徴

「スクールは高いから独学で成功する」という気持ちの方は多いと思います。
もちろんその方が金額は低く抑えられるでしょう。
ただ独学には向き不向きがあり、実はスクールが向いている人も大勢います。

そんな方のために参考として、テックアカデミー卒業生がスクールを選んだ理由をご紹介します。

・困って挫折しそうなときに、質問や相談できる相手がいる環境で学んでいきたいなと思った
・わかった気になっているだけだったので、自分を追い込む環境に置いた方がいいと感じた
・スクールのカリキュラムで市場に求められるスキルを学ぶべきと思った

少しでも当てはまる部分があれば、スクールが向いているかもしれません。
お試しのつもりで、まずは一度無料相談に参加してみませんか？

現役エンジニア・デザイナーに何でも気軽に相談できる30分をすべて無料でできます。
無理な勧誘は一切ないので、お気軽にご参加ください。

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

mockingbird

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

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

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

mockingbird利用方法

mockingbird

POP

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

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

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

使用方法

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

↓

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

↓

アプリ側で操作します。

↓

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

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

いかがでしたか？

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

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

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

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

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

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

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

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

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

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

「受けてよかった」と感じていただけるよう厳しい試験を通過した講師があなたの相談に真摯に向き合います。

「ただ気になることを相談したい」
「漠然としているがプロの話を聞いてみたい」
こんな気持ちでも大丈夫です。

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

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

【誰でも手軽に！】グラフィックデザインができるツール「Snappa」とは！

グラフィックデザインとは、主に雑誌やポスターなど平面上にデザインすることを言います。 Webでもリアルでも広告などを見るでしょう。そして、より印象を際立た...

Webデザイン

スペースを作りたい！CSSでmarginの書き方【初心者向け】

初心者向けにCSSでmarginの書き方を解説しています。これからCSSを学習しようと思っている方でも実際に業務で使っている方でもmarginは必ず使用します。...

CSS

スマホ対応！レスポンシブデザインの参考になるサイト10選

今や当たり前になっているスマホ対応のためにレスポンシブデザインを理解する必要があるでしょう。レスポンシブデザインに対応したサイトをまとめているので、ぜひ...

Webデザイン

事例から学ぶ！マテリアルデザインとは【初心者向け】

シンプルな見た目なのにどこかリッチな印象を受ける、「マテリアルデザイン」聞いたことはあるけど、誰かに説明できるほど詳しく分からないという方も多いのではな...

Webデザイン

作業を円滑に！エンジニアとデザイナーが衝突しない秘訣とは

本稿は、UXPinのブログ記事を了解を得て日本語翻訳し掲載した記事になります。記事は、エンジニア、Webデザイナー、ペンシルバニア州立大学の助教授であるJame...

Webデザイン

SCSSでforを使ってループ処理をする方法を現役エンジニアが解説【初心者向け】

SCSSでforを使ってループ処理をする方法について、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。 ...

CSS

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

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

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

Photoshop

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

Photoshopの基本中の基本となる「レイヤー操作」について初心者向けに解説した記事です。 Photoshopのファイルはレイヤーという透明のフィルムが何枚も重なっている状態で管理されています。背景・オブジェクト・文字などのレイヤーを分けることによって、それぞれ違う描画モードを設定したり、他のレイヤーの情報に影響を与えずに画像を編集できます。 (※今回の作業はすべてAdobe Photoshop CCのバージョンで行っています。) 目次Cacoo（カクー）moqupswireframe.ccPrototypermockingbirdPOP 大石ゆかり田島メンター！！今日はレイヤーについて教えてください。田島悠介 Photoshop内の透明なフィルム、その1枚1枚をレイヤーというんだ。各レイヤーにはそれぞれ「描画モード」というものを設定することができるようになっているよ。大石ゆかり「描画モード」ですか？田島悠介レイヤー内の要素を、画像全体の中でどのような合成方法で使用するかという機能なんだ。試しにレイヤーを作成してモードを変更してみようか。レイヤーの「描画モード」レイヤーには様々な種類が存在します。今回はいくつか基本的なものを紹介します。田島悠介レイヤーを新規作成すると「通常」の状態で作成されるよ。また、レイヤーの描画モードはいつでも変更可能なんだ。大石ゆかりずいぶんたくさん種類がありますね！でも、これだけあると何を使っていいか分からなくなりませんか～？田島悠介各モードをクリックするとその場で画像に反映されるので、画面を見ながらどれを使ったらいいか考えることもできるからね。よく使う描画モードについて見てみよう。例として、背景のレイヤー0の上に、もみじの葉以外の部分が透明の状態になっているレイヤー1があるとします。このレイヤー1にいくつかの代表的な描画モードを設定してみましょう。描画モードは赤枠の部分をクリックすることで変更が可能です。描画モード「通常」初期設定されている描画モードが「通常」です。上のレイヤーにあるものが優先して表示され、透過の部分は下のレイヤーが見えます。描画モード「乗算」下のレイヤーの色と上のレイヤーの色を掛け合わせ、色が暗くなる演算を行います。どんな色でも黒と掛け合わせると演算結果は黒になります。逆にどんな色でも白を掛け合わせると変化はありません。描画モード「スクリーン」下のレイヤーの色と上のレイヤーの色を掛け合わせ、色が明るくなる演算を行います。描画モード「乗算」の時とは反対に、どんな色でも白と掛け合わせると演算結果は白になります。逆にどんな色でも黒を掛け合わせると変化はありません。レイヤーの「不透明度」各レイヤーには不透明度を設定できます。初期設定では100％になっており、数値を下げると下のレイヤーが透けて見えるようになります。以下は、文字ともみじのレイヤーの透明度を50％に、描画モードを通常に設定しています。 [PR] Webデザインで副業する学習方法を動画で公開中背景レイヤー背景レイヤーという、透明ピクセルの存在しない特殊なレイヤーがあります。このレイヤーは最背面に固定されており、描画モードや不透明度を設定できません。背景レイヤーは通常のレイヤーへ変更することが可能です。背景レイヤーを右クリックし「背景からレイヤーへ」を選択します。レイヤーから背景へ変更する場合は、背景に変更したいレイヤーを選択した状態で、上メニューの「レイヤー」→「新規」→「レイヤーから背景へ」を選択します。すると、レイヤー内の透明部分が背景色で塗りつぶされ、最背面に固定されます。用途に合わせて使い分けてください。コラム実は私も！？独学で損する人の特徴「スクールは高いから独学で成功する」という気持ちの方は多いと思います。もちろんその方が金額は低く抑えられるでしょう。ただ独学には向き不向きがあり、実はスクールが向いている人も大勢います。そんな方のために参考として、テックアカデミー卒業生がスクールを選んだ理由をご紹介します。

Photoshop

【未来の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ページ用エディタもあります。これらを使うことで、ローファイプロトタイプからコードを加えた完成製品まで全て作ることができます。または、これらをプロトタイプを速く作る目的だけに使い、プロジェクトの最終段階ではカスタマイズしたコードを使う方法もあります。どちらの方法でも上手くいくでしょう。コラム実は私も！？独学で損する人の特徴「スクールは高いから独学で成功する」という気持ちの方は多いと思います。もちろんその方が金額は低く抑えられるでしょう。ただ独学には向き不向きがあり、実はスクールが向いている人も大勢います。

アプリデザイン

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

本稿は、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のレイヤーロックの解除方法について、TechAcademyのメンター（現役エンジニア）が初心者向けに解説します。なお本記事は、TechAcademyのオンラインブートキャンプPhotoshop講座のカリキュラムをもとに執筆しています。田島悠介今回は、Photoshopに関する内容だね！大石ゆかりどういう内容でしょうか？田島悠介レイヤーロックの解除方法について詳しく説明していくね！大石ゆかりお願いします！目次レイヤーのロックとはレイヤーをロックする方法レイヤーのロックを解除する方法レイヤーのロックが解除できないときの主な原因まとめレイヤーのロックとはレイヤーに鍵かけ、編集や移動ができなくする機能です。 [PR] Webデザインで副業する学習方法を動画で公開中レイヤーをロックする方法 Photoshopのレイヤーロックには、以下の5種類があります。透明ピクセルをロック画像レイヤーにのみ適用されるロック機能です。画像レイヤーの透明な部分への描画や塗りができなくなります。画像ピクセルをロック画像レイヤーにのみ適用されるロック機能です。画像レイヤーに描画しようとすると、以下のようなエラーメセージが表示され描画はできません。位置をロックレイヤーの移動ができなくなります。アートボードやフレームの内側へ自動ネストしないアートボード間でレイヤーを移動すると、自動的に移動先のアートボードにネストされるのを無効にします。すべてをロック描画や移動だけでなく、全ての機能が適用できなくなります。レイヤーのロックを解除する方法ロックを解除したいレイヤーを選択し、レイヤーパネルの上のロックアイコンをクリックします。コラム実は私も！？独学で損する人の特徴「スクールは高いから独学で成功する」という気持ちの方は多いと思います。もちろんその方が金額は低く抑えられるでしょう。ただ独学には向き不向きがあり、実はスクールが向いている人も大勢います。そんな方のために参考として、テックアカデミー卒業生がスクールを選んだ理由をご紹介します。

Photoshop

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

Photoshopでレイヤーをコピーする方法について、TechAcademyのメンター（現役エンジニア）が初心者向けに解説します。なお本記事は、TechAcademyのオンラインブートキャンプPhotoshop講座のカリキュラムをもとに執筆しています。田島悠介今回は、Photoshopに関する内容だね！大石ゆかりどういう内容でしょうか？田島悠介レイヤーをコピーする方法について詳しく説明していくね！大石ゆかりお願いします！目次レイヤーとはレイヤーをコピーする方法別ファイルのレイヤーをコピーする方法まとめレイヤーとは photoshopのレイヤーは、透明なシートのようなものです。photoshopで、テキストや画像、長方形などのオブジェクトは、それぞれ1枚の透明なシート上に作成され、重なった状態でスクリーン上に表示されます。そして、レイヤーの位置を上下に移動することで、テキストと画像の重なり順を変え、テキストを画像の上に表示させたり、画像の下にしてテキストを隠すこともできます。 [PR] Webデザインで副業する学習方法を動画で公開中レイヤーをコピーする方法 photoshopでは、レイヤーをコピーする方法は、1つではなく複数あります。メニューのコマンドを使ってコピーする方法レイヤーパネルでコピーしたいレイヤーを選択します。そして、上部のメニューの「編集 > コピー」をクリックし、レイヤーをコピーします。「編集 > ペースト」をクリックし、レイヤーを貼り付けます。同じ位置にコピーしたい場合は、「編集 > 特殊ペースト > 同じ位置にペースト」をクリックします。右クリックメニューのコマンドを使ってコピーする方法レイヤーパネルのコピーしたいレイヤー上で右クリックし、メニューを表示し「レイヤーを複製」をクリックします。「レイヤーを複製」パネルが表示されたら「新規名称」に新しいレイヤー名を設定し、「OK」で確定します。確定されると選択されたレイヤーのすぐ上にレイヤーが追加されます。また、複製されたレイヤーのオブジェクトはコピー元と同じ位置に配置されます。キーボードショートカットを使ってコピーする方法1と２の操作は、キーボードからも行うことができます。コピー「Ctrl＋c（Command＋c）」ペースト「Ctrl＋v（Command＋v）」レイヤーの複製「Ctrl＋j（Command＋j）」別ファイルのレイヤーをコピーする方法レイヤーパネルのコピーしたいレイヤーをクリックし、上部のメニューの「編集 > コピー」または、キーボードの「Ctrl＋C（Command＋C）」でレイヤーをコピーします。コピー先のファイルを開き、上部のメニューの「編集 > ペースト」または、キーボードの「Ctrl＋v（Command＋v）」でコピーしたレイヤーを貼り付けます。貼り付けたレイヤーは、ファイルを開いと時に選択されたレイヤーのすぐ上に追加されます。コラム実は私も！？独学で損する人の特徴「スクールは高いから独学で成功する」という気持ちの方は多いと思います。もちろんその方が金額は低く抑えられるでしょう。ただ独学には向き不向きがあり、実はスクールが向いている人も大勢います。

Photoshop

記事を検索

ニュース

インタビュー

テクノロジー

キャリア

お問い合わせ

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

Cacoo（カクー）