Variableとは

Variableはスタイルのように再利用可能な定義で、色、数値、文字列などのさまざまなデザイン属性に割り当てることができます。

Variableのタイプ

Variableには、以下の4つのタイプがあります。

• Color
• Number
• String
• Boolean

Color

Colorは値に色を設定でき、オブジェクトの塗りやストロークに適用できます。

Number

Numberは値に数値を設定でき、幅や高さ、間隔、パディング、角丸などに適用できます。

String

Stringは値に文字列を設定でき、テキストレイヤーに適用したり、バリアントに使うことができます。

Boolean

Booleanは値にtrueまたはfalseを設定でき、レイヤーの表示非表示を切り替えるために使用できます。

Variableの作成

Variable作成の手順を案内します。

Variableモーダルを開く

キャンバス上で何も選択していない状態で、右側のサイドバーから、Local Variables をクリックするとVariableを管理するVariableモーダルが開きます。

コレクションの作成

Variableはコレクションで管理します。コレクションは変数の関連セットでいくつでも作成できます。

どのようにコレクションを分割するかに特に決まりはありませんが、例として下記のような分け方が考えられます。

• プリミティブトークンとセマンティックトークンでコレクションを分割する
• ブランドカラーとシステムカラーでコレクションを分割する

Variableの作成

コレクションを用意したらVariableを作成しましょう。
Create Variableボタンをクリックして、作成したいタイプを選ぶとVariableが作成できます。

NameはVariable名、Valueには値を設定します。
選択したタイプに応じて、Colorの場合はカラーの値を、Numberの場合は数値を設定できるようになっています。

エイリアス

Variableの値には、既に定義されている他のVariableを選択することができます。（エイリアス）
例えば、button-background-primaryのVariableを、BLUE60のエイリアスにするような使い方ができます。

エイリアスの作成は、値で右クリックすると出てくるメニューのCreate aliasから設定できます。

また、エイリアスの元となるvariableの値を変更すると、エイリアスのvalueも同じ値に更新されます。

グループ

コレクション内の複数のVariableをグループ化して整理できます。

グループを作成する方法は、グループ化したいVariableを選択した状態で右クリックすると表示されるメニューから。New group with sectionを選択するとグループが作成できます。

または、VariableのNameに / を入れることで階層が作られるのでこの方法でグループを作成することもできます。

Variableの適用

Variableをオブジェクトに適用する方法

作成したVariableの適用は、基本的に右サイドバーを使って行います。
Variableのタイプによって、適用する場所が異なります。

Color

Colorはオブジェクトの塗りやストロークに適用できます。オブジェクトを選択時の、FillやStroke横の4つの点アイコンから適用できます。

Number

Numberは、幅や高さ、間隔、パディング、角丸などに適用できます。六角形のアイコン、またはApply variableからVariableを適用できます。

String

Stringはテキストレイヤーに適用したり、バリアントに使うことができます。テキストレイヤー、またはインスタンスを選択時に六角形のアイコンから適用できます。

Boolean

Booleanはレイヤーの表示非表示に適用できます。目のアイコンを右クリックするとVariableを適用できます。

Variableのスコープ

ColorとNumberタイプのVariableは、Variableをどのプロパティの設定時に表示させるか設定できます。

例えば、 「border-primary というVariableは、ストロークの設定時のみ表示させる」といった設定ができます。

注：Colorのスコープ設定はすでに可能ですが、Variableを使用する際にスコープはまだ適用されません。この機能は近日中に追加される予定です。

Mode

Modeは、異なるコンテキストデザインを変化させることができます。 例えばModeを利用することで、ダークテーマ、ライトテーマのような切り替えが即座に行えます。
注：Modeは有料プランでないと使用できないかもしれません

Modeの追加

Variableモーダルの、列のヘッダーにある + ボタンをクリックすると新しいModeが作成されます。デフォルトでは一番左のModeから新しいModeへ値を複製します。

Modeの適用

デフォルトでは、Variable適用時には一番左のModeが適用された状態となります。

Modeを持つVariableが適用されたレイヤー、またはそれを包含するレイヤーを選択した状態で、レイヤー横の六角形の重なったアイコンをクリックするとModeの切り替えができます。

Modeの継承

Modeの設定にはAutoという値があり、Autoは親の値の継承という意味になります。
例えば、レイヤーの構造が
frame1 > button
となっており、buttonにVariableが適用されているとします。 また、buttonのModeはAutoとします。
この場合、buttonのModeは親であるframe1のModeの値を継承します。
frame1のModeがLightの場合buttonのModeはLightが適用、frame1のModeがDarkの場合buttonのModeはDarkが適用されます。
下の画像は、ModeにLightを設定したframe1からDarkに設定したframe1にbuttonを移動した時に、buttonのModeが切り替わる様子のアニメーションです。

その他

VariableかStyleか？

色のような要素を定義する場合、FigmaではVariableとStyleのどちらでも定義ができます。また、Variable機能が登場以前はStyleを使うのが定番でした。

VariableとStyleの異なる点として、Variableが単一の値を表すのに対し、Styleは複数の値で構成できます。例えば、Stlyeでは複数の塗りを持つカラーやグラデーションも定義できます。

そのため単色はVariableを、Variableでは定義できない場合はStyleを使うと良いでしょう。

• XDユーザーがFigmaを使う時に知っておくと理解が早まるポイント
• Photoshopで理論的に配色はできないものか検証してみた
• facebookのsocial plugin(ソーシャルプラグイン)一覧
• CSSで角丸を表現する方法をちょっと詳しく書いてみる
• レスポンシブWebデザインでテーブルを使う時の小技

ベクターネットワーク

Figmaでのベクターは、ベクターネットワークと呼ばれています。Adobe製品に代表されるような一般的なベクターパスとほぼ同じようなものですが、一部異なる部分があります。

主な違いは下記のようになります。

一般的なベクターパスに慣れていると戸惑う部分もありますが、理解すればさほど難しくはありません。
ここからはFigmaのベクターネットワークの使い方を案内します。

用語

使い方を説明するにあたり、用語を案内しておきます。

※ 当ブログ記事内での呼び方です。正確な名称と異なってる可能性もありますのでご了承ください

ベクター編集モード

ベクターネットワークはベクター編集モードで編集できます。
ベクター編集モードでは、個々のアンカーポイント、パス、またはシェイプ全体のプロパティを調整、変更することができます。

ベクター編集モードに入る

ベクター編集モードーには下記のいずれかの操作で入れます。

• パスを選択してEnterキーを押す
• パスを選択してedit objectアイコンをクリック
• パスをダブルクリック

ベクター編集モードの終了

ベクター編集モードは下記のいずれかの操作で終了できます。

• Enterキーを押す
• escキーを押す
• 編集中のシェイプの外側をダブルクリックする
• ツールバーのdoneボタンをクリックする

ベクターネットワークの編集

パスの作成

ペンツール（ショートカット：Pキー）を選択します。
キャンバス上の任意の場所をクリックするとアンカーポイントが追加されます。そのままキャンバス上の別の場所をクリックすると、アンカーポイントとアンカーポイントを結ぶパスが作成されます。

アンカーポイントの上にマウスをホバーすると黒丸マークが表示されます。その状態でクリックするとクローズパスが作成されます。
Shiftキーを押しながらだと45度刻みの角度でパスを引けます。

アンカーポイントを追加する際にクリックしたままドラッグするとベジェハンドルが表示され、曲線を調整しながらパスを作成できます。

またこの時にOptionキーを押しながらドラッグするとベジェハンドルのミラーリングが解除され、ハンドルを別々に操作できます。

アンカーポイントの追加

ペンツールの状態でカーソルをパス上に持ってくるとプラスマークが表示されます。その状態でクリックするとパスに新しいアンカーポイントが追加されます。

アンカーポイントからパスを作成する

ペンツールの状態でパスを作成したいアンカーポイントにカーソルを持ってくると黒丸が表示されます。その状態でクリックするとそのアンカーポイントを起点にパスが引けます。

なお、ベクターネットワークでは1つのアンカーポイントから複数のパスを作成できます。

アンカーポイントの削除

ペンツールの状態でOptionキーを押しながらアンカーポイントの上にカーソルを持ってくると、マイナスマークが表示されます。その状態でクリックするとでアンカーポイントが削除されます。また、端点でなくパス上のアンカーポイントを削除した場合は、その前後のアンカーポイントをつなぐ形でパスが引き直されます。（オープンパスにはなりません）

塗りつぶし

パスで囲まれたエリアは塗りつぶしができます。
塗りつぶしはバケツツール（ショートカット：Bキー）を選択して、塗りつぶしたいエリアをクリックします。
また、別々の閉じた領域であれば、異なる色で塗りつぶすことができます。
塗りつぶされているところでは塗りつぶしツールにマイナスアイコンが表示され、この状態でクリックすると塗りつぶしが削除されます。

ベジェカーブの操作

ベジェハンドルのポイントをクリック&ドラッグしてパスのカーブを調整できます。
通常ペジェハンドルは一方を操作するともう片方も同時に動きますが（ミラーリング）、ポイントをOptionキーを押しながらクリック&ドラッグするとハンドルを別々に操作できます。

ミラーリングでなくなったハンドルは、ポイントをコマンドキーを押しながらドラッグでミラーリングに戻することができます。

ミラーリングにするかしないかは、右のプロパティパネルでも変更できます。

ハンドルのないコーナーの場合、ツールバーのBend toolを選択した状態か、コマンドキーを押しながらポイントをクリック&ドラッグすると、ハンドルが表示され、ミラーリングされたカーブが作成されます。

ハンドルを無くしたい場合は、Bend toolを選択した状態か、コマンドキーを押した状態でアンカーポイントをクリックするとなくなります。

Bend toolを選択した状態でパスをドラッグするとカーブを調整できます。選択ツールの時はパス上でコマンドキーを押しながらドラッグで同様の操作が行えます。

角丸

パス上のコーナーは、右サイドバーの角丸プロパティで丸めることができます。パス全体を選択すると、すべてのコーナーが同じ程度に丸められます。

個々の点を選択した状態で角丸の設定をすると、個別に角丸の大きさを設定できます。

キャップ（端点のスタイル）

開いているパスの終点にスタイリングを追加できます。選択したベクターの種類によって、キャップの設定が変わります。

2つの端点を持つベクター

端点が2つしかないベクターを選択すると、右サイドバーにキャップのプロパティが表示されます。それぞれのキャップを独立して設定することができます。

2つ以上の端点を持つベクター

端点が2つ以上あるベクターを選択した場合、ストロークの詳細メニューにキャッププロパティを表示します。
ベクターパス全体が選択されている場合は、キャップを単独で編集することはできません。終点のキャップを独立して編集するには、ベクター編集モードの状態でポイントを1つずつ選択して設定します。

その他Tips

その他、知ってると便利なTipsをざっと紹介します。

• ペンツールやバケツツールでコマンドキーを押してる間はBend toolになります
• アンカーポイント選択してからdeleteキーでアンカーポイントが削除され、オープンパスになります
• shft + deleteだとオープンパスにはならず、両側のアンカーポイントを繋ぐ形でパスが引かれます
• 選択ツールでshiftキーを押しながらクリックするとアンカーポイントを複数選択できます
• 選択ツールでドラッグすると、その範囲内にあるアンカーポイントが全て選択されます
• 複数アンカーポイントを選択した状態で整列ができます
• アンカーポイントを選択した状態でOption+ドラッグでアンカーポイント複製できます

終わりに

私がそうだったのですが、Adobe製品などでいわゆるベクターパスに慣れてる方には、1つのアンカーポイントから複数のパスが引ける点などは最初は戸惑う点だと思います。それもあり今回詳しく調べたのですが、仕様を理解すると難しいことではないですし、逆に使いやすいと思う点もあるので、本記事が今後Figmaのベクターを使っていく方の一助になると幸いです。

• XDユーザーがFigmaを使う時に知っておくと理解が早まるポイント
• 大量のphotoshopブラシを効率よく管理する方法
• Adobe Bridgeの使い方と便利な10機能
• 知識0からのjQuery Mobileを使ったサイト制作に役立ったサイト
• DreamweaverCS5のテンプレートをHTML5にすると文字化けする

関わっている現場の一つで、デザインツールをAdobe XDからFigmaに移行しました。その時に今までFigmaを使ったことのないメンバー向けにFigma勉強会などを開催し、すぐに使い始められるようサポートをしました。
その経験の中で、これからFigmaを使い始めるXDユーザーが理解に時間がかかる点や躓くところをまとめてみました。

ファイル構造と管理構造

XDは1つのXDファイルの中にアートボードで各種画面を作成します。またCreative Cloudのグループ版およびエンタープライズ版ではチーム内でXDファイルを共有できます。

Figmaファイル内の構造

Figmaは1つのFigmaファイルの中に、pageという階層があります。pageの中にFrameで各種画面を作成します。

Figmaアカウントのファイル管理構造

Figmaでは1アカウントごとにDraftとTeamがあり、それらの配下でFigmaファイルを管理します。 Draftは文字通り下書きの意味で、1人もしくはごく限られたメンバーで使うFigmaファイルの配置を想定されています。Draftに置かれたFigmaファイルでも他のメンバーにファイルを共有することは可能ですが、閲覧権限のみで編集権限は付与できません。（freeプランの場合）Draft配下では無制限にFigmaファイルを作成できます。

Teamはさらにプロジェクトというディレクトリを持ち、その中でFigmaファイルを管理します。 Teamはチームコラボレーションを前提としてます。Teamに編集権限でメンバーを招待すると、招待されたメンバーはそのTeam内の全てのFigmaファイルの編集権限や新規ファイルの作成削除の権限を持ちます。
Team作成はfreeプランでも行えますが、Team内で作成できるファイルは3つまで、編集権限で招待できるメンバーは2人までとなります。 そこを開放するには、professional以上の契約が必要となります。 なお、課金はTeamの編集権限を持つメンバー数分の金額となります。

Frameについて

XDでは、ひとつひとつの画面をアートボード単位で作成します。Figmaでこのアートボードに該当するのはFrameになります。

ただし、XDのアートボードとFigmaのFrameは似て非なるものと思ったほうが良いでしょう。
主に下記の点がXDのアートボードと異なります。

• Frameの中にFrameを入れられる（入れ子にできる）
• ボーダーや角丸のスタイルやドロップシャドウなどのエフェクトを設定できる
• UIパーツにもFrameを使う
• auto layoutが設定できる（後述）

おそらく”XDのアートボード”の感覚でいると、入れ子にしたり、小さなUIパーツにもFrameを使うことに違和感を覚えると思います。極端な話、まずはFrameという言葉に惑わされずに、そういうFigma特有の機能だと捉えると良いでしょう。

FrameとGroupの違い

FigmaにはGroupもあります。なので、Frameを入れ子にするくらいならGroupを使えば良いのでは？と思うかも知れません。私も最初はそう思ってました。
確かに要素をまとめるという目的で言えばGroupで事足りますが、Frameはそれだけに留まらず、UI作成に便利な機能が備わってます。FigmaのUI作成においてはGroupよりFrameの方が利用頻度が高くなります。
以下で、GroupとFrameそれぞれの特徴を案内します。

Group

言葉通り、要素をまとめて1つのグループとして操作ができます。XDのグループと同じと捉えて問題ないでしょう。
Groupはグルーピングした要素と互いに影響し合います。必ずGroupの大きさは中身を全部選択した時の大きさになります。

またGroupには色やボーダーなどのスタイルを指定できません。

Frame

Groupと同じように要素をまとめて1つのグループとして操作ができます。
ただしGroupと異なり、Frameの大きさはまとめた要素とは連動しません。故に中の要素がFrameの枠よりはみ出すこともあります。（Frameより外に出た要素をは表示させないようにする設定もあります）

また色やボーダーなどのスタイルや、ドロップシャドウなどのエフェクトも設定できます。

auto layout

Figmaにはauto layoutという機能があります。auto layoutでは、アイテムが並ぶ方向やアイテム同士の間隔、親要素の余白などが設定できます。 XDのスタックとスペースをまとめた機能と考えるとイメージしやすいと思います。
ただし、似てるようで細かい部分が異なります。

Figmaのauto layout

auto layoutはframeに対して指定します。
auto layoutの仕様はcssのflexboxに非常に近いです。auto layoutを設定したframeがcssで display: flex を指定した親要素、auto layoutの余白はcssのpadding、アイテムの間隔はgapとイメージしていただくと分かりやすいと思います。

auto layoutではアイテムをどのようにに配置するか設定します。ここもcssの、justify-content、align-itemsと同じものと考えると良いでしょう。space-betweenも指定できます。

XDのスタック・スペースとFigmaのauto layoutとの違い

上記で説明したように、auto layoutの各アイテムの位置は個別に設定するのではなく、全体に対する設定となります。逆に言うとアイテム毎に位置は指定できません。（frameを入れ子にすることで可能ではある）
追記：アップグレードでできるようになったようです
Figmaの新機能まとめ #Config 2022｜Naoki Hashimoto｜note

また、frameのサイズを変化させてもpaddingは変化しません（維持されます）
auto layoutは設定した余白以上に余白が生じることがあります。これは、”この値の余白になる”のではなく、”最低限この値の余白は確保”されるという仕様のためです。

一方、XDでは余白の値が変化します。XDのパディングは必ずその値で余白が作られます。

どちらの仕様が良いかは使う人によって異なるかもしれませんが、個人的には親要素のサイズを変更しても設定した余白の値は維持されるFigmaの仕様のほうが使いやすいと思っています。

コンポーネント

FigmaとXDのコンポーネントの仕様は大体同じです。マスターコンポーネントとインスタンスがあって、マスターコンポーネントを変更すると、変更はインスタンスにも反映されます。
細かいところで違いがあるので以下で説明します。

Figmaのコンポーネントの特徴

インスタンスの各レイヤーの色やエフェクトなどのプロパティは変更できます。また、レイヤーの表示非表示もインスタンス毎に変更できます。また、コンポーネント内にコンポーネントがある時は、そのインスタンスを別コンポーネントに差し替えできます。
一方、インスタンスのレイヤー構造自体は変えられません。つまり、レイヤーの順番を変更したり、インスタンスに新しいレイヤーを追加はできません。

Variants

コンポーネントにはVariantsという複数のスタイルを持てる機能があります。XDのステートと似たような機能と考えていただいて良いでしょう。
FigmaのコンポーネントのVariantsは、ステートと異なり複数の状態をかけ合わせて指定できます。例えば以下の例では、「style」「type」「status」という3つのプロパティを設けて、それぞれの値を変えることでコンポーネントのスタイルを切り替えられます。

共有方法

ファイルを他のメンバーに共有する場合、XDは基本的にアートボード単位での共有となり、アートボード内に無いもの、例えばアートボードの外に書いたコメントなどは共有されません。ファイルのすべてを共有するには、そのメンバーを共同編集者として追加するか、XDファイルを渡す必要があります。

Figmaファイルの共有

Figmaファイルの共有は、基本ファイル単位となります。つまりファイル内の全て（すべてのpage、各pageの中身全て）も共有されることになります。
また常に現在のファイルの状態が反映されているので、ファイル内の編集は即時に閲覧してるメンバーの画面にも反映されます。共有するたびにURLを発行する必要はありません。

Figmaファイルの共有方法

Figmaファイルを他のメンバーに共有する一番簡単な方法は、右上のShareをクリックして、左下の「Copy link」をクリックするとクリップボードにURLがコピーされるので、そのURLを共有します。URLにアクセスするだけで、誰でもFigmaファイルを閲覧できます。
※ 招待したメンバーのみアクセス可能にする、閲覧・編集権限を変更する、など細かい設定もできます

FigmaにXDファイルをインポート

現在、XDファイルをそのままFigmaにインポートすることはできません。下記のような有料のサービスがありますが、使ったことはないので精度は分かりません。
Magicul – Design-to-anything converter engine – Convert Adobe XD, Figma, Sketch and more

複雑な構成でなければ、コピー・ペーストで移管することはできます。その時にコツとしては、XDでコピーをする時に「SVGコードのコピー」でコピーしてからFigmaでペーストすると正確な情報で移管できる可能性が高くなります。

終わりに

XDもFigmaもツールの利用目的が同じであり、全体のインターフェイスも似てるので、どちらかの経験がある方であれば、もう一方を使えるようになるまでそう時間はかかりません。
ただし似てるが故に、同じ感覚で操作してるとちょっとした仕様の違いで「これできないんだっけ？」と躓くこともあるので、本記事がそのような方に役立つと幸いです。

追記

freelance hubのコラム記事でこの記事を取り上げていただきました。
注目度高めのデザインツール！「Figma」の魅力と疑問が解決できるブログ記事まとめ
freelance hubの案件一覧はこちら

• FigmaのVariableの使い方
• Figmaのベクターデータの編集のしかた
• Web制作者は知っておきたいwebサイトのレイアウト7選
• 使えるとレスポンシブWebデザインに便利なCSS
• レスポンシブWebデザインでハマりがちな%指定

業務委託先の会社でCSS Gridの社内勉強会を開催したので使用した資料を公開します。

細部は発表しながら補足する前提で作成した資料のため、スライドだけでは情報が十分でない部分もありますが、概要は掴めるのではと思います。

また、スライド内で使用しているコードはこちらで確認できます。
コード一式はこちらからダウンロードできます。

資料やサンプルコードは学習や勉強会目的で自由に使用していただいて構いません。
また、誤りなどありましたらご指摘いただけると嬉しいです。

CSS Gridの資料を作成していて学んだこと

私自身CSS Gridを熟知していた訳ではなく、学んでいる段階でした。そこで、自分の学びを共有する形にしたら学びも深くなるし、他のメンバーのスキルアップにも貢献できると思い勉強会を開催しました。

資料作成の前はCSS Gridの基本的なことを把握している程度だったのですが、資料作成を通して新しい学びや発見が多々ありました。

特に学びの多かった点を下記に挙げます。

アイテムを行(列)全体に配置指定

アイテムの配置指定を、grid-column: 1 / -1 や grid-row: 1 / -1 とすることで行(列)全体を指定できます。この方法で指定すれば、途中でトラック数が増減しても影響されません。
サンプル

spanを使った指定

grid-column: 2 / span 3 のように開始位置から幾つ目のラインまでを領域とするかを指定できます。（この例ではライン番号2から始まり3つ目のライン番号までが領域となる）直感的に理解できるのが良いです。
サンプル

ライン名とラインエリアの関係

{エリア名}-start と {エリア名}-end を付けて四方を囲まれた領域はその名前のグリッドエリアとなります。その逆に、名前付きグリッドエリアを作成すると、四方のグリッドラインは {エリア名}-start と {エリア名}-end のライン名を持ちます。直ぐに使いみちは思いつかないのですが、頭の片隅に入れておくとどこかで役に立つときがくるかもです。。（使い道はまだ分からない）
サンプル

空白セルを埋める指定

デフォルトでは自動配列で生じた空白セルは巻き戻って埋められませんが、grid-auto-flow:dense を指定すると巻き戻ってセルを埋めてくれます。アイテムの大きさがまちまちだけど、余白を出さずに画面いっぱいに埋めたいケースなどで役に立ちそうです。
サンプル

1つのセルに複数のアイテムを配置

1つのセルに複数のアイテムを配置できることは発見でした。1つのセルには1つのアイテムしか配置できなイメージがあったので。また重なったアイテムはz-indexで重なり順を制御できます。画像の上にテキストを重ねるUIなど使い所は多そうです。
サンプル

12カラムレイアウト（グリッドシステム）

レイアウトのグリッドシステムとして使う12カラムレイアウト。（12である必要はないのですが一般的に12が多いので例として12としてます）
現在の主流はflexboxを使ったレイアウトだと思うのですが、gridでも同じものが作れますし、オフセットが必要でない点は使いやすいと思いました。
一方でflexboxであることが都合が良いときもあるので用途に応じて使い分けられるのが一番良さそうです。
サンプル

定義リスト

この書き方はMDNの記事で紹介されていたのですがGridの仕様をうまく利用した書き方であり、すごく面白いと思いました。
この定義リストに限らず、Gridを使うことでスッキリ書けるレイアウトは他にもありそうなので、ここはGridに可能性を感じている部分であり、Gridで書き直せないかは今後意識してみようと思いました。
サンプル

最後に

今回の勉強会を通して一通りCSS Gridに関しては学べたと思いますが、まだまだ実務での利用数は少ないです。他のプロパティ同様に実務で使うと、イメージ通りにできなかったり、バグが発生したりはあると思うので、ここからは実践を通して理解を深めていこうと思います。

• Web制作者は知っておきたいwebサイトのレイアウト7選
• レスポンシブWebデザインに使えるCSSフレームワーク&グリッドシステム
• 使えるとレスポンシブWebデザインに便利なCSS
• レスポンシブwebデザインで制作する時のポイント
• XDユーザーがFigmaを使う時に知っておくと理解が早まるポイント

はじめに

AppleScriptとは、アップルが開発したmacOS用のオブジェクト指向のスクリプト言語で、システムや様々な対応アプリケーションを制御できます。

このAppleScriptを使うことで、いつも行う操作や処理などを自動化できます。

例えば。私はフリーランスで複数のプロジェクトに関わっています。当然、プロジェクトごとに環境は異なりますので、稼働日に応じて現在立ち上がってる環境を落として、新しい環境を立ち上げる、ということを繰り返してたのですが、これが毎回となると結構な手間です。

そこで、AppleScriptを使って、環境の切り替えを自動化しました。

上の動画では、AppleScriptで下記の作業を自動化してます。

1. iTermを立ち上げて分割。一つはプロジェクトディレクトリに移動しdocker立ち上げ、一つはVS codeでプロジェクトディレクトリを開く
2. chromeでローカルホストを開く（docker起動が終わる前なので最初はnot foundになる）
3. Finderでプロジェクトディレクトリを開き、新規タブでプロジェクトの作業フォルダを開く
4. Sourcetree立ち上げ

このようにAppleScriptを使うとMac上での作業を効率化できます。
この記事では初めてAppleScriptを使う方向けに、基本的な使い方とどのようなことができるのか紹介します。

エディタ

エディタには、Macにプリインストールされてるスクリプトエディタを使います。他のエディタでもAppleScriptは書けると思いますが、スクリプトエディタは直ぐにスクリプトを実行できたり、後述するアプリケーションの書き出し対応や、用語説明など一通りの機能が備わってるので、まずはこれを使うのが良いと思います。

また、Automatorを使うと、GUIで簡単にワークフローを作れますが、本記事では触れません。

基本コマンド

アプリケーションの選択

tell application "Google Chrome"
    <コマンド>
end tell

tell application "起動したいアプリケーション で、操作するアプリケーションを指定します。
tel とend tell の間に実行したいコマンドを書きます。

アプリケーションの起動

tell application "Google Chrome"
    activate
end tell

activate でアプリケーションを起動します。
同様に run でもアプリケーションを起動できます。

activate と run の違いは、 activate アプリケーションを起動してアクティブ（手前）にするのに対し、 run は起動するのみでアクティブにはしません。
参考：AppleScript でアプリケーションを起動・終了する \- ObjecTips

アプリケーションの終了

quit でアプリケーションを終了します

tell application "Google Chrome"
    quit
end tell

key入力

tell application "System Events" でSystem Eventsを選択して、keystroke や key code コマンドでkey入力を制御できます

スペースキーなど特殊なキーを入力したい場合は key code コマンドを使用します。

tell application "System Events"
    -- スペースキー入力
	key code 49
end tell

key code 一覧はこちらを参照ください。
Complete list of AppleScript key codes

コマンドやオプションなどの特殊キーと組み合わせる時は、 using <特殊キー> down と書きます。

-- コマンドキーを押しながらc（コピー）
keystroke "c" using command down
-- コントロールキー、シフトキーを押しながらスペース
key code 49 using {control down, shift down}

Finderを開き、新規タブを開く（「command + T」を入力する）スクリプトは下記のようになります。

tell application "Finder"
    activate
    tell application "System Events"
        keystroke "t" using command down
    end tell
end tell

主な構文

ダイアログ表示

display dialog でダイアログを表示します

display dialog "hello"

変数への代入

変数への代入は setを使用します。

set <変数名> to <値>
# sample
set greeting to "hello"
set thisYear to 2021
set isAnimal to true

if 文

if文は、 if 条件式 then 〜 end if になります。
また、条件式の = は代入ではなく、等しいという意味の比較演算子になります。

if <条件式> then
    <命令>
else if <条件式> then
    <命令>
else 
    <命令>
end if

例

set animal to "dog"
if animal = "dog" then
	display dialog "犬"
else if animal = "cat" then
	display dialog "猫"
else
	display dialog "その他"
end if

コメント

行頭に -- を入れるとその行はコメントになり実行されません。

-- コメントです

アプリケーションとして書き出し

アプリケーションとして書き出すと、ダブルクリックでスクリプトを実行できます。

書き出し方法は、メニューの「ファイル」→「書き出す」を選択し、表示されるウインドウで「ファイルフォーマット」を「アプリケーション」に選択します。

System Eventsエラー

アプリケーションでSystem Eventsを利用する時は、最初に下記のようなエラーが表示されると思います。

System Eventsでエラーが起きました: スクリプトエディタにはキー操作の送信は許可されません

アラートで許可するを選択すれば、それ移行はエラーが表示されずに実行されます。
それでもエラーが表示されるようであれば、「システム環境設定」で「セキュリティとプライバシー」を選択し、「アクセシビリティ」でアプリを追加すると解決します。

各アプリケーションごとのコマンド

アプリケーションによっては、AppleScriptで特定のコマンドを実行できるものがあります。主に自分が利用したアプリケーションのコマンドを紹介します。

他のコマンドやアプリケーションを調べたい時はネットで検索いただくか、「ファイル」→「用語説明を開く」でアプリケーションを選択して確認もできます。

Finder

フォルダを開く

open folder <path> でフォルダを開きます。

-- デスクトップを開く
tell application "Finder"
	open folder "Macintosh HD:Users:taro:Desktop"
end tell

ファイルのパスは下記の書き方もできます。

open folder POSIX file "/Users/hiro/Desktop"

下記の記事も参考になります。

• MacのFinderタブを保存＆復元するアプリ \- 株式会社Villness（ヴィルネス）
• \[ AppleScript \] Finder 関連のサンプル集 \| うどん県ウェブディレクター日記

iTerm

iTermを操作する基本構文

iTermのアクティブなセッションで ls を実行する場合。

tell application "iTerm"
    activate
    set _current_session to current session of current tab of current window
    tell _current_session
        -- ここに操作したいことを書く
		write text "ls"
    end tell
end tell

別のセッションを選択

first, second, … last などでセッションを指定できます。

tell second session of current tab of current window
	write text "ls"
end tell

下記の記事も参考になります。

• iTermをAppleScriptで操作する – ハイパーマッスルエンジニアになりたい
• AppleScript で iTerm2 Version 3 を操作する
• Scripting \- Documentation \- iTerm2 \- macOS Terminal Replacement
• 鳶嶋工房 / AppleScript / Dictionary / Application\(目次\)

Chrome

選択

tell application "Google Chrome"
	...
end tell

新規ウインドウを開く

make new window

タブでURLオープン

tell window 1 to make new tab with properties {URL:"<http://design-spice.com>"}

URLオープン

ウインドウが0ならウインドウを開いてアクセス、ウインドウがあるなら新規タブで指定したURLを開きます。

open location '<http://xxx>'

リロード

reload active tab of window 1

作成したもの

ここまでの技術をもとに、実際に私が使ってるものを最後に共有します。オリジナルのAppleScript作成するときに参考にしてください。
※ 一部、私の環境に依存してるところもあるので、その辺は書き換えてます。

set theUrl to "http://localhost:3000"
-- 開発ディレクトリ
set theFolder1 to "Macintosh HD:Users:hiro:develop:hoge"
-- 関連ファイルなどを管理するディレクトリ
set theFolder2 to "Macintosh HD:Users:hiro:project:hoge"
tell application "Finder"
	activate
	close every window
	open folder theFolder1
	tell application "System Events"
		keystroke "t" using command down
		delay 1
		tell application "Finder" to set target of Finder window 1 to theFolder2
	end tell
end tell

tell application "iTerm"
	activate
	close current window
	if current window = missing value then
		create window with default profile
	end if
	set _path to "cd /Users/hiro/develop/hoge"
	set _current_session to current session of current window
	tell _current_session
		-- ここに操作したいことを書く
		split horizontally with default profile
		-- docker立ち上げ
		write text _path
		write text "docker-compose up"
	end tell
	tell last session of current tab of current window
		write text _path
		-- vscode立ち上げ
		write text "code ./ -r"
	end tell
end tell

tell application "Google Chrome"
	activate
	open location theUrl
end tell

tell application "Sourcetree" to run

• MacのFinderで開いているフォルダのパスをターミナルで取得する
• WordPress内の人気の記事を表示するプラグイン Popular Posts
• macでweb制作するなら入れておきたいQuick Lookプラグイン10選
• Facebook・Twitterなどソーシャルボタン設置方法まとめ
• 「関連するエントリー」を表示するプラグイン Similar Posts

2回目のフリーランスになってから1年経ったので、記録も兼ねて振り返ってみました。
なお、初めてフリーランスになってから1年の記事はこちらをご覧ください。
フリーランスになって一年経って

私の経歴

ざっくりと私の経歴はこんな感じです。

• 新卒後、印刷会社でDTPオペレーターとして2年勤める。
• 転職して複数の制作会社でWebデザイナーの経験を積む。
  主に小規模のWebサイト制作を数多くこなす。Webデザイン、コーディング、ディレクションと、上流から実装まで全て請け負う。
• これまでの経験を活かし独立。これが1回目のフリーランス。
  制作会社や代理店からの請負が7割、直クライアント案件が3割ほど。Webデザイン、コーディング、ディレクションを請けてたが、コーディングの比率が一番大きい。
• フリーランスを3年半ほどやって、Webサービスを運用するスタートアップにデザイナーとして就職。
  サービスデザイン、UI/UXデザイン、Webデザイン、コーディング、JS実装、デザイン組織づくりなどとにかく幅広くやる。 4年ほど務める。
  （株式会社ホットスタートアップに入社しました参照）
• 2019年末に退職し、再びフリーランスになる。

業務形態で言うと、
正社員→アルバイト→派遣→正社員→フリーランス→正社員→フリーランス
になります。

現状

制作会社（受託と自社サービスを開発）とスタートアップでそれぞれ週2日、業務委託として稼働。どちらもWebサービスのサービスデザイン、UI/UXデザイン、マークアップ、JSの実装などが主な業務内容です。
残りの1日はスポットで小規模のWebサイトやLP制作、コーディングやサービスのアドバイザーを請け負ってます。

仕事の依頼元

すべて今までの繋がりからです。

• 前職の繋がり
• 過去に登壇したイベントの繋がり
• 知人からの紹介

新規で営業などは行ってません。前のフリーランス時代に身に染みて感じたことですが、やはり人との繋がりはとても大事だなと思います。

そのために意識していることを上げるとすれば、

• 信頼されること
  • 最低限、要望は達成する、納期を守る、不正を行わない
• スキルを磨くこと

でしょうか。どちらも特別なことではないですが、これができていれば自分の繋がりから仕事の相談が得られると今までの経験からも実感しています。

収入

のんびりスタートしようと思っており最初からガツガツ動かなかったのですが、ありがたいことに途切れなく仕事の話をいただけたおかげで収入は前職のころとほぼ変わりませんでした。
週4で働いて残り1日は学習に割いてた期間もあったので、それを加味すればこの結果に満足してます。
コロナの影響もほとんど無く幸いでした。

生活

社員時代と変わらず規則正しい生活を送ってます。業務委託の一つが稼働時間が決まっていることもありますが、それが無くても、規則正しい生活を送ったほうがパフォーマンスが出るのでここは乱さないよに気をつけてます。

仕事環境

仕事は基本自宅で、時々気分転換を兼ねてカフェでやったりします。そろそろコワーキングなどの月額会員も検討してますが、結構MTGが多いので、プライバシーが保てるという条件が満たせるか次第だと思ってます。

前のフリーランス時代と変わったこと

多少変わることは予想してましたが、想定以上に違いました。

働き方が変わった

前のフリーランス時代は、Web制作の案件が殆どで納期までに仕上げて納品する形でした。そのため、いつ作業するか、どのくらい時間かけるかなどは全てこちらでコントロール可能でした。また大体の案件は保守とかもなく納品したらそこで終わりでした。
一方、現在は業務委託として働いています。一社は稼働日が決まっており、その日はその会社の始業就業時間に合わせて稼働します。今でこそリモートワークになりましたが、最初の頃は電車通勤で出社して、業務委託先の会社のオフィスで仕事してました。 稼働の面だけで言えば社員の働き方と変わりません。

求められるスキルが変わった

前のフリーランス時代は、Webデザイン、コーディングが主でした。いまはプロダクトのUI/UXデザインやサービスデザインを求められることが多いです。やはり前職、スタートアップでプロダクトのデザインを5年近く経験したことが影響してると思います。
もともと前職に就職する時に、スタートアップの経験があれば今後またフリーランスになった時にできることの幅が広がると思っていましたので、狙い通りと言えば狙い通りです。
ただ、Web制作とプロダクトのデザインを5:5の割合くらいで考えてたのですが、蓋を開けてみたら2:8くらいの割合でした。

ストレスが増えた

前のフリーランス時代はとにかく自由度が大きかったです。 自分の好きな時間に稼働する働き方は性に合ってました。平日に外出したり、週末に仕事したり。それでプライベートと仕事の境は無くなってましたが特にストレスはありませんでした。
いまは業務委託で稼働時間が縛られるのが窮屈に感じるのと、与えられた時間内でパフォーマンスを発揮しなければと、プレッシャーに感じストレスになってる気がします。
あとこれは性格的な要因なのですが、どうもリモートワークもストレスになってるようです。見えてないからこそ「しっかりと成果を示さなければ」と常に全力疾走してしまいます。

ただし、将来のことを考えると、業務委託でリモートワークの働き方は続けて行きたいと思ってますし、プロダクトにしっかり向き合うことを考えると業務委託で長期的に関わる働き方になると思います。
慣れであったり、捉え方で解決できそうな部分なのでここを改善するのが直近の課題です。
でもどうしてもこの働き方が辛ければ、別の道も考えますが。。

フリーランスに戻って良かったか

良かったと思ってます

この一年、フリーランスになったことを後悔したことはありませんし、フリーランスになって良かったと思うことも多々ありました。
前のフリーランス時代と比べてネガティブなことも書きましたが、それでも社員の頃と比べて自由を享受してます。フリーランスになってから満足した生活送ってます。

再びフリーランスになった当初は、また直ぐにどこかに就職する可能性も考えてました。社員として一つの企業で働くことで得られることもありますので。
一年経って、社員になる可能性はいまもなくなったわけではないですが、あと数年はフリーランスでやってく気持ちのほうが強いです。

これから

フリーランスになったばかりの時期は、その選択にいささかの不安がありました。
周りのフリーランス仲間が次々と企業に就職していくのを目にしたり、今後50、60歳でもフリーランスにイメージが湧きづらかったからです。
一年経過して、フリーランスの勘を取り戻したこともあり、まだしばらくはフリーランスでやっていけるイメージを持てました。

これから先を考える時に10年後とか遠い未来を予測しても、ほとんど当てにならないと思ってます。特にこの業界は変化も激しいので。
今後2、3年先で予定を考えてます。そこを見据えるとUI/UXデザイン、サービスデザインのスキルと経験値を上げること、フロントエンドの力を付けることを目標としてます。
あとは業界の動向を常にキャッチアップしつつ柔軟に動き方を変えていければと思ってます。

今までもなんとかやってこれたし、これからもマイペースでなんとかやっていけると前向きな気持ちでいます。

None Found

Reactを学習する時に実際に使ったサイトや書籍を紹介します。私が使用した順ではなく、一通り実践した結果、この順番だと基礎から学べるかなと思った順番に紹介してます。

ちなみに学び始める前の私のスキルは下記の通りです。

• JavaScriptの基本的な理解はある
• jQueryは仕事で使えるレベル
• Reactは全く使ったことがない

注意

Reactは変化が早く、ここ数年で書き方の主流も大きく変わっており、Reactコンポーネントの主流はクラスコンポーネントから関数コンポーネントに移り変わってきているようです。（私もまだちゃんと理解はしてない。。）

ここで取り上げた教材や書籍も、情報や書き方が今では古くなっていたりするものもあります。そちらを念頭に置いていただいて、最新の情報をキャッチアップされることをおすすめします。

React公式のドキュメントとチュートリアル

React – ユーザインターフェース構築のための JavaScript ライブラリ

難しく書かれてると勝手に想像してて、私は最初に手を付けなかったのですが、やはり公式を読むのが一番だと改めて思いました。Reactの公式のドキュメントは日本語で書かれてますし、初めてでも分かるように丁寧に書かれてます。
最低限、DocsのINSTALLATIONとMAIN CONCEPTSは目を通して理解しておくと良いと思います。ADVANCED GUIDES以降はサラッと目を通す程度で、また後で見返すことになるかなと思います。
チュートリアルも実際に手を動かしながらReactで三目並べゲームを作ります。こちらもひとつひとつの説明がとても丁寧で、基礎概念がしっかり学べる内容になってます。

React.js & Next.js超入門

書籍の「はじめに」で下記のように案内されています。

本書で取り上げる機能は、React全体のおそらく2〜3割でしょう

その説明の通り、おそらくReactの初歩の部分だけなのだと思いますが、それ故に初心者には優しい内容になっています。JSX、ステート、コンポーネントからReduxまで広く取り扱ってます。初心者が基本を学ぶにはちょうどいいレベルの内容だと思います。
私もReduxの概念をこの書籍で大分理解できました。

JavaScriptオブジェクト超入門の章もあり、ReactではなくJavaScriptの仕様でも難しいところは丁寧にフォローされてるところも初学者には優しい。
なお、Next.jsはまだ読んでないのでコメントは割愛します。

今から始めるReact入門

今から始めるReact入門 〜 React の基本 – Qiita

Qiitaの記事です。
react-appから作成するのではなく、0から開発する時の手順も学べます。Webpackなどについても説明があるので、Reactの周辺技術の理解も深まります。React Routerやflux、Reduxについても詳しく説明されています。JavaScriptのimmutableの解説も分かりやすいです。

動画の教材と違って、自分のペースで進められる点や、コードをコピペできる点も良いなと思います。私は基本的な使い方については他で学んだ後、こちらに取り組んだのですが復習にも役立ちました。

フロントエンジニアのためのReact・Reduxアプリケーション開発

フロントエンドエンジニアのための React ・ Redux アプリケーション開発入門 | Udemy
Udemyの講座です。（有料）
基礎からステップアップ的に学んで、最終的に簡単なCRUDアプリケーションが作れます。

実装前の仕様や処理の流れなどの説明が丁寧です。リファクタなど実務に近い部分までフォローしてくれる点も良いです。
私が一番始めに取り掛かった教材で、初学者にはReduxの概念が理解するのが難しかったです。

最短で学ぶReactとReduxの基礎から実践まで

最短で学ぶReactとReduxの基礎から実践まで | Udemy
こちらもUdemyの講座です。（有料）
APIを利用したホテル検索アプリケーションが作れます。

eslintを導入するなど、かなり実践に近い内容ではないかと思いますPropTypesを使った型指定もしっかりやってます。
まず動くものを作って、そこからリファクタリングしたり、Redux導入する一連の流れを体験できる点も良いです。ファイルの分割の仕方なども勉強になります。
RouterやReduxの仕組みを図解で説明されてる点も理解に役立ちました。

上記で紹介した「フロントエンジニアのためのReact・Reduxアプリケーション開発」よりスピードは早めです。また、入れるライブラリの名前やバージョンが変わってたりするので注意が必要です。

Atomic Design

モダンな開発のUIコンポーネント設計を取り扱った書籍であり、前半はAtomic Designの説明、後半は実践の構成となってます。
実践では、ReactとStorybookを使ってコンポーネントを作成します。

テストやアクセシビリティなどの解説もあり、かなり実践的な内容です。
もともとはCSS設計を学ぶために購入したのですが、Reactを使ったコンポーネント設計を学ぶにも適した書籍だと思います。

Container ComponentとPresentation Componentのコンポーネントの分け方は勉強になりつつ、初学では難しく感じました。Reactを実務で使えるレベルで、Storybookも使用した経験があると多分進めやすかったのかなと思います。

React Hooks 入門 – HooksとReduxを組み合わせて最新のフロントエンド状態管理手法を習得

※2020年10月追加
【はむ式】React Hooks 入門 – HooksとReduxを組み合わせて最新のフロントエンド状態管理手法を習得 | Udemy
Udemyの講座です。（有料）

冒頭にも書いたように、やはり現在はReact Hooksを使った関数コンポーネントを使うのが主流となっています。
Reactの概要を理解してる方であれば公式のドキュメントを読むとHooksがどのようなものか把握できると思います。
フックの導入 – React

さらに理解を深めようと、こちらのUdemy講座を受講しました。
React Hooksの基礎を学び、簡単なアプリケーションを作成します。実践編ではReduxも取り入れます。

useStateやuseEffectは実務でも使ってたのでさらに理解を深めることに、useContextやuseReducerなど実務でも使ったことがなくよく理解してなかったものは具体的な使用方法を含めて学ぶことができました。

• レスポンシブWebデザインのブレークポイント調査
• CSSのセレクタを活用しよう
• wordpressでjQueryを使う時の注意点
• MacのFinderで開いているフォルダのパスをターミナルで取得する
• 知識0からのjQuery Mobileを使ったサイト制作に役立ったサイト

MacOSではAppleScriptの代わりにJavaScriptが使えるようになったので、JavaScriptを使用します。
ターミナルからはosascriptコマンドで-lオプションでJavaScriptを指定して実行できます。

# sample.js
console.log(‘hoge’);

osascript -l JavaScript sample.js

ファイルの作成

selectionというコマンドでパスを取得したいので、selectionという名前でファイルを作ります。（拡張子はつけません）

#!/usr/bin/osascript -l JavaScript

const finder = Application('Finder');
const getFullPath = (file) => {
  const path = [];
  while(true){
    name = file.name();
    if(name === 'Macintosh HD'){
      break;
    }
    else{
      if (file.kind() === 'フォルダ') {
        path.unshift(name);
      }
      file = file.container();
    }
  }
  return '/' + path.join('/');
};
finder.selection().map(getFullPath).join('\n');

説明

finder = Application(‘Finder’);
finder.selection();

で下記のようにパスまでの情報が返ってきます。

finder.selection()[0].name();

でファイル名が取得できます。

finder.selection()[0].kind();

で選択しているファイル/フォルダの種別が取得できます。

finder.selection()[0].container();

でひとつ上の階層に移動します。

ファイル/フォルダ名を取得し空の配列に追加し、階層をひとつ上に移動してファイル/フォルダ名を配列に追加する処理を、Machintosh HDにたどり着くまで繰り返します。
その後、配列を/区切りでで1つに繋げて、返します。
また今回はディレクトリのパスを取得したいので、ファイルを選択してた時はファイル名は取得せずに配置されているディレクトリ名から取得するようにしてます。

こちらの実装は下記の記事を参考にさせていただきました。
macOSのFinderで選択中のパスをターミナル上で取得する – Qiita

コマンドで使えるようにする

ファイルのパーミッションを755にします。
~/.binディレクトリを作成し、その中にファイルを入れます。（作成するディレクトリは何でも構いません。パスを追加する時に、作成したディレクトリを指定します）

bashrcを開き、パスを追加します。

export PATH=$HOME/.bin:$PATH

再読み込みします。

source ~/.bashrc

ターミナルでselection と叩くと、現在Finderで開いているディレクトリのパスが返ってきます。

cd "$(selection ~)"

とすると、Finderのディレクトリまで移動できます。
これも1つのコマンドにできると良いのですが、今回はそこまで対応してません。

• AppleScriptでMacの作業を自動化する
• React初心者がReactを学ぶために使用したサイトや書籍
• macでweb制作するなら入れておきたいQuick Lookプラグイン10選
• フォームのフリガナを自動入力する AutoRuby.js
• 柔軟なワークフロー

その言葉から勘違いされることが多いですが、デザイン思考とはデザイナーだけのものではなく、全ての人が身につけられるものです。デザイン思考とは、「問題を解決する方法を設計するための考え方」であり、人々を正しく理解するためのマインドセットです。

1. 共感
2. 定義
3. アイデア
4. プロトタイプ
5. テスト
   のプロセスを行きつ戻りつしながら進んでいきます。

デザイン思考のプロセス

0. 問題定義→トピックを決める

どんなトピックをテーマにしてプロジェクトを進めるか決めます。
「目的」や「テーマ」と考えると良いでしょう。
人々の問題に関連することはデザイン思考のトピックに向いています。

1. 共感→問題を見つけるための情報を集める

インタビューを通じてどこに問題があるか情報を集めます。
インタビューをしたら記憶が確かなうちにメモにまとめておきます。
「共感マップ」や「カスタマージャーニーマップ」を書いてもらった場合はそれもチームに共有します。

2. 定義→解くべき問題を決める

インタビューで集めた情報をもとに、解くべき問題を探します。
ここで言う「問題」とはトピックに関連した中で、適切なサイズにブレイクダウンした「ニーズ」や「不便を感じるポイント」となります。

ここはブレインストーミングを通じた作業になります。

問題の探し方

• インタビュー結果をチームに共有する
• カスタマージャーニーマップを活用する
• これがニーズだと思えるものをポストイットに書き出す
• 動詞を使いニーズを探す
• ペインポイントを探す
• インサイトを見つける

リフレーミングする

ユーザーの悩みについて別の視点からも見直してみます

着眼点(POV)のつくり方

POV(Power of View)とはプロジェクトのトピックを実行可能な問題に変換したものです。
次のHMWのベースになります。
「ユーザー」は「ユーザーのニーズ」をする必要があった、なぜなら「驚くようなインサイト」のためだ
上記を埋めるとPOVが出来上がります。

HMW（How might we ）でまとめる

解くべき問題を、HMWの形で整理します。

HMWの作り方

• よいところを伸ばす
• 悪いところをなくす
• ひっくり返してみる
• 前提を問い直す
• 形容詞を変えてみる
• ほかのリソースを使う
• ニーズやコンテキストから連想する
• トピックスに着眼点を適用してみる
• 現状を変えてみる
• 着眼点を分割する

3. アイデア→ブレインストーミングを通じ解決方法を探す

問題を解決するためのアイデアをブレインストーミングで考えます。

ブレインストーミングの心がけ

1. ジャッジしない
2. 大胆にいこう
3. 「Yes,and」
4. 一度に発言できるのは一人だけ
5. トピックに集中する
6. 可視化する
7. 質より量

出てきたアイデアは似たもので分類して、投票します。

投票の指針

• 最も成功する可能性が高そう
• 最もユーザーを喜ばせる可能性が高い
• 最も画期的

4. プロトタイプ→アイデアを検証できる試作品を作る

アイデアをテストするためのプロトタイプを作成します。

プロトタイプがうまくいってるのか確かめる基準

1. ユーザーがプロトタイプからどんなことを感じるのか
2. どうやって使うのか
3. これがユーザーのニーズを満たすものか

5. テスト→ユーザーテストを通じて評価する

アイデアを評価してもらいます。テストに入る前に判断基準を決めておきます。

テストの前に確認しておくこと

ユーザーテストのポイント

• テストの目的
• これから話を聞くのは誰か
• インビューの相手に事前に聞くこと
• プロトタイプが出てくるコンテキスト
• プロトタイプを触ってもらった後に聞くこと

UXや人間中心設計、デザインスプリントなどを学んだことがある人には細かい部分での違いはあるものの、それらと似ていると気づくでしょう。

デザイン思考は特に、社会課題の解決や、新しいサービス・プロダクトを創出する時に役立つと思います。
またデザイン思考の本質を学べば、既にリリースされたプロダクトの改善などにも活用することはできそうです。

本書はデザイン思考のプロセスと、ツールキットと具体的にそれを使ったデザイン思考の進め方の他、ファシリテーションのためのアイスブレイク集や、ティップス、ブレインストーミングを活性化させるための方法も書かれています。現場ですぐにデザイン思考を始められる内容となっています。

adaffa

fafdafafaf

• WordPressでタグクラウドのフォントサイズを変更
• Web制作フローの再考とDesigning in the browser

Similar Posts:

None Found