初心者も知っておきたい！Xcodeのショートカットキー10選

iPhoneアプリの開発など、iOSアプリの統合開発環境である「Xcode」で、初心者が知っておきたい【ショートカットキー】を10紹介する記事です。ショートカットキーを覚えると、ファイルの表示切り替えなど作業が楽になります。

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

iPhoneアプリの開発など、iOSアプリの統合開発環境として「Xcode」があります。

Xcodeは無料でインストールできますが、初心者でまだまだ使いこなしていないという人もいるかもしれません。

そこで、今回は初心者がはじめに覚えるべきXcodeのショートカットキーを10個紹介します。初歩的な内容がメインです。

なお本記事は、TechAcademyのiPhoneアプリ開発オンラインブートキャンプでも一部を紹介しています。

ショートカットキーの説明の前に

ショートカットキーを紹介する前に、修飾キーの略語について説明をします。ショートカットキーは略語で紹介しているので、覚えておいてください。

コマンドキー:cmd(⌘)
オプションキー:otp(⌥)
コントロールキー:ctrl(⌃)
シフトキー：shift(⇧)
ファンクションキー:fn(fn)

今回はcmd、opt、ctrlの3つを使いますが、残り2つも覚えておくとリファレンスを読む際の参考になると思います。

また、Appleのサポートページにもショートカットキーの説明がありますので、Xcode以外にも使えるショートカットキーは覚えておくと他の作業も効率が上がります。

他に、JSキーボードの場合、「システム環境設定 > キーボード > 修飾キー」からcapsキーとctrlキーを入れ替えるとctrlキーが押しやすくなるのでおすすめです。

それでは、ショートカットキーをチェックしていきましょう。

cmd+1：左ペインファイルツリーの表示

左ペインファイルツリーの表示

Xcodeでは、.hファイルや.mファイルだけでなくAppで使用する画像などもファイルツリーに格納していきます。

そのため、ファイルツリーには比較的アクセスすることが多くなるので覚えておきましょう。

[PR] iPhoneアプリ開発コース

cmd+4：error/Warningツリーの表示

Warningツリーの表示

開発が一段落し「実行」しようとすると、関数の定義不足値の設定ミス、単純なタイプミスなど、様々なエラーが出ることがあります。

そんな時は、「cmd+4」のショートカットでerror/Warningツリーを左ペインに表示させて、トライ&エラーをしていきましょう。

cmd+0：左ペインの表示/非表示

左ペインの非表示

MacBook Airの11インチなど画面の小さいPCを使っていると、Xcodeの画面が狭くてコードが見にくくなる時があります。

そんな時は、このショートカットキーを使って不要なメニューを非表示にしましょう。

cmd+opt+1：ファイルインスペクタの表示

ファイルインスペクタの表示

左ペインと同様に、右ペインもショートカットキーで切替ができます。

よく使う、ファイルインスペクタの表示を覚えておきましょう。

cmd+opt+0：右ペインの表示/非表示

右ペインの非表示

画面が小さい場合、またはソースコードに集中したい時は左ペインと同様に右ペインも非表示にします。

先に紹介した左ペインの切替と右ペインの切替とを比べてみれば予想はつくかと思いますが、「cmd+opt+0」です。

左ペインのショートカットキー+optと覚えておくと、良いでしょう。

cmd+任意のシンボルをダブルクリック：シンボルが定義された所を開く

シンボルが定義された所を開く

Web上から参考にしたいソースコードをダウンロードしてそれを読むときに便利なショートカットキーです。

他の人が書いたコードは、変数の定義がどこでされたのかわかりにくいことがあると思います。そんな時は「cmd+対象の任意のシンボルをダブルクリック」で定義位置を確認しましょう。自動でファイルが切り替わります。

opt+任意のシンボルをダブルクリック：シンボルをリファレンスで検索

シンボルをリファレンスで検索1 シンボルをリファレンスで検索2

前述した、シンボルの定義位置の確認と同じく便利なショートカットキーです。

「opt+対象のシンボルをダブルクリック」でシンボルをリファレンスで検索することができます。これで、シンボルの意味をすぐに調べられます。

ctrl+.：入力補完の実行

入力補完の実行

入力補完とはわかりやすく言うと、「予想表示」です。

関数の最初の1文字をタイプしたあとに「ctrl+.(ピリオド)」で関数の予想が一覧で表示されます。そこから「.(ピリオド)」を押していくと、自分の入力したい関数が見つかるので、「.(ピリオド)」から指を離せば入力完了となります。

最初の1文字だと候補が多すぎるので、最初の3文字くらいまで入力することをおすすめします。

cmd+ctrl+↑/↓：.hと.mの切替

hとmの切替1 hとmの切替2

Xcodeでの開発において.hファイルと.mファイルの行き来は必須ですが、面倒な作業でもあります。

そんな時は「cmd+ctrl+↓/↑」で.hファイルと.mファイルを切り替えていきましょう。

cmd+R：iPhoneシミュレータの起動

iPhoneシミュレータの起動1 iPhoneシミュレータの起動2 iPhoneシミュレータの起動3

最後は、開発の終わりに使うであろうiOSシュミレータの起動です。

このショートカットキーをタイプすると、Buildが始まります。Buildが完了(Build Successfull）すると自動でiOSシュミレータが起動します。

あとは開発したAppをシュミレータ上で起動して動作を確かめていきましょう。

かなり初歩的なショートカットキーが中心でしたが今回は以上です。

ぜひ自分でも試してみてください！

iPhoneアプリのシミュレーターの使い方も合わせてチェックするとXcodeがより使いこなせるようになります。

[お知らせ]TechAcademyでは初心者でも8週間でオリジナルアプリが作れるiPhoneアプリ開発オンラインブートキャンプを開催しています。

【開発しながら学ぶ！】Swiftで作るサンプルiOSアプリをまとめてみた！

すでにSwiftを学んでいる人もこれからiOSアプリを作ってみたいという人にも参考になるサンプルアプリをまとめています。作りたいアプリが特に無いという人は、今回...

iPhoneアプリ開発

XcodeでUINavigationBarを追加する方法【初心者向け】

iPhoneアプリ開発では、アプリの画面を作るのに便利なUIパーツが多数用意されています。今回は、XcodeでUINavigationBar（ナビゲーシ...

iPhoneアプリ開発

XcodeでUIImageViewを追加する方法【初心者向け】

iPhoneアプリの開発の際に便利な、UIパーツの使い方を初心者向けに紹介する記事です。今回は、XcodeでUIImageView（イメージビュー）を扱...

iPhoneアプリ開発

XcodeでUISliderを追加する方法【初心者向け】

iPhoneアプリ開発で便利な、UIパーツの使い方を初心者向けに紹介する記事です。今回はUISlider（スライダー）の追加方法を解説します。 &...

iPhoneアプリ開発

XcodeでiPhoneアプリのアイコン画像を変える方法【初心者向け】

iPhoneアプリのアイコン画像はXcodeから変更することができます。アイコン画像によってアプリのダウンロード数が変わることもあるので、重要なポイントです。 ...

iPhoneアプリ開発

XcodeでUISwitchを追加する方法【初心者向け】

iPhoneアプリの開発に便利なXcodeのUIパーツを紹介する記事です。今回は、XcodeでUISwitch（スイッチ）を追加する方法を紹介します。 ...

iPhoneアプリ開発

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

【Windows編】パワーポイントで使える便利なショートカットキー20選

パワーポイント(PowerPoint)を使ってスライドショーを行う際に使えるショートカットキーについてご存知ですか？時間をかけて作ったスライドを効果的に使って、スマートなプレゼンテーションにしたいものですよね。今回は、スライドショー実行中に使えるショートカットキーを厳選して紹介します。なお本記事は、KiRAMEXのオンライン完結のPowerPoint(パワーポイント)講座の内容をもとに紹介しています。目次先頭のスライドから開始スライドショーの終了現在のスライドから開始次のスライドを表示前のスライドを表示指定したスライドを表示最初のスライドを表示スライドにペンで書き込みをするスライドに蛍光ペンで書き込みをするスライドにある書き込みを消すスライドにある書き込みを全て消すポインタを矢印にするレーザーポインタを表示する画面を黒にする画面を白にするメディアを再生・一時停止するメディアの再生を停止する音量を上げる音量を下げるショートカットキー一覧を見る（ダイアログボックスを表示）プレゼンに使えるパワーポイントショートカットキーまとめ先頭のスライドから開始「F5」まずは基本中の基本、スライドショーをスタートさせるショートカットキーです。マウス操作をしなくても、「F5」を押すことで、スライドショーが開始されます。 [PR] iPhoneアプリ開発コーススライドショーの終了「Esc」スライドショー中に他のアプリケーションに切り替えるときには、一旦スライドショーを終わらせる必要がありますよね。「Esc」を押すことで、スライドショーを中断、終了させることができます。現在のスライドから開始「Shift」+「F5」スライドショーを中断した後、「F5」を押して再開させると、最初のスライドが表示されてしまいます。そこで、「Shift」を押しながら「F5」を押すことで、中断したスライドから再開することができます。「スライドショーの終了」と一緒に覚えておきたいショートカットキーです。次のスライドを表示「N」、「Enter」、「PageDown」、「→」、「↓」、または「Space」スライド間の移動に使うショートカットキーです。いくつかありますが、基本的にEnterキーを覚えておくと間違いがありません。前のスライドを表示「P」、「PageUp」、「←」、「↑」、または「BackSpace」プレゼンに合わせて前のスライドに戻りたいときには、このショートカットキーを使いましょう。こちらも同様にいくつかありますが、「戻る」＝「BackSpace」と紐付けると覚えやすいです。「次のスライドを表示」と合わせて覚えてしまいましょう。指定したスライドを表示「数字キー」+ 「Enter」特定のスライドを表示させたいときってありますよね。そんなときには、表示させたいスライドの番号を「数字キー」で押し、「Enter」を押すと希望のスライドへとジャンプすることができます。最初のスライドは「0」か「1」、最後のスライドは「99」のように大きな数字を入れるだけで良いので、覚えておくと便利です！最初のスライドを表示左右のマウスボタンを 2 秒間押し続ける最初のスライドに戻るには、「0」か「1」を押した後「Enter」を押す以外にも、マウスを使う方法があります。左右のマウスのボタンを2秒間押し続けることで、最初のスライドを表示することができます。その時々に応じて、使い分けてみましょう。スライドにペンで書き込みをする「Ctrl」+「P」プレゼン中に、スライドに書き込みをしたいときに便利なのがこのショートカットキーです。「Ctrl」を押しながら「P」を押すことで、ポインタをペン機能に変更することができます。スライドに蛍光ペンで書き込みをする「Ctrl」+「I」 PowerPoint2013では、ペン機能と同様に蛍光ペンにもショートカットキーで使用できます。「Ctrl」を押しながら「I」を押すことで、ポインタを蛍光ペン機能に変更することができるので、スライドに強調したい箇所がある場合などに使うことをオススメします。スライドにある書き込みを消す「Ctrl」+「E」書き込みをしたところを消したい、そんなときに使えるのが消しゴム機能です。「Ctrl」を押しながら「E」を押すことで、ポインタが消しゴム機能となり、ペンで書いたところを消すことができるようになります。上述のペン、蛍光ペン、消しゴム機能は、それぞれ同じ操作を行うことで解除することができるので、合わせて覚えましょう！スライドにある書き込みを全て消す「E」ペン機能で書き込んだ内容を一気に消したいときに使えるショートカットキーです。「E」を押すことで、書き込んだ内容をすべて消すことができます。消しゴムを意味する「Eraser」の「E」と考えると、簡単に覚えられますよ。ポインタを矢印にする「Ctrl」+「A」ポインタをペン機能や消しゴム機能に変更した後、ポインタを元に戻したい！そんなときには、「Ctrl」を押しながら「A」を押してみましょう。通常の矢印ポインタに戻すことができます。レーザーポインタを表示する「Ctrl」を押したまま、マウスの左ボタンを押し続ける (PowerPoint2013では「Ctrl」+「L」) スライドの注目してほしいところを強調するときには、レーザーポインタを使いたいですよね。「Ctrl」を押したままマウスの左ボタンを押し続けている間、ポインタをレーザーポインタに変更することができます。 PowerPoint2013では「Ctrl」を押しながら「L」を押すことでも同様に変更することができ、もう一度同じ操作をすることで解除されるので便利です。画面を黒にする「B」プレゼンの途中にスライドではなく、発表者の話に注目してほしいときってありますよね。そんな時には、「B」を押すことで画面を真っ黒にすることができます。画面を白にする「W」「画面を黒にする」と一緒に覚えたい機能です。「W」を押すことで、画面を真っ白にすることができます。画面を白くするか、それとも黒くするかは、プレゼンをしている環境に応じて選んでみましょう。メディアを再生・一時停止する「Alt 」+ 「P」スライドに埋め込んだメディアを再生したい！そんなときには、「Alt 」を押しながら「P」を押してみましょう。もう一度押すと、一時停止させることができます。メディアの再生を停止する「Alt」 +「 Q」「メディアを再生する」と一緒に覚えたいこの機能。再生しているメディアを停止したいときは、「Alt 」を押しながら「Q」を押すと止めることができますよ。音量を上げる「Alt 」+ 「↑」プレゼンの効果を高めるBGMの音量を、簡単に調節できるショートカットキーです。「Alt 」を押しながら「↑」を押すことで、BGMの音量を大きくすることができます。音量を下げる「Alt 」+ 「↓」 BGMが大きすぎたので小さくしたい、そんなときには「Alt 」を押しながら「↓」を押してみましょう。「音量を上げる・下げる」ショートカットキーをうまく使って、その場に応じたBGMの音量を調節できるようになりましょう！ショートカットキー一覧を見る（ダイアログボックスを表示）「F1」うっかりショートカットキーを忘れてしまった！そんなときには、スライドを開きながら「F1」を押すと、ショートカットキーが一覧になったダイアログボックスが表示されます。一つのショートカットキーにいくつもの機能が対応していることもあるので、一度確認してみましょう。プレゼンに使えるパワーポイントショートカットキーまとめキー機能「F5」先頭のスライドから開始「Esc」スライドショーの終了「Shift」+「F5」現在のスライドから開始「N」、「Enter」、「PageDown」、「→」、「↓」、または「Space」次のスライドを表示「P」、「PageUp」、「←」、「↑」、または「BackSpace」前のスライドを表示「数字キー」+ 「Enter」指定したスライドを表示左右のマウスボタンを 2 秒間押し続ける最初のスライドを表示「Ctrl」+「P」スライドにペンで書き込みをする「Ctrl」+「I」スライドに蛍光ペンで書き込みをする「Ctrl」+「E」スライドにある書き込みを消す「E」スライドにある書き込みを全て消す「Ctrl」+「A」ポインタを矢印にする「Ctrl」を押したまま、マウスの左ボタンを押し続ける(PowerPoint2013では「Ctrl」+「L」) レーザーポインタを表示する「B」画面を黒にする「W」画面を白にする「Alt 」+ 「P」メディアを再生・一時停止する「Alt」 +「 Q」メディアの再生を停止する「Alt 」+ 「↑」音量を上げる「Alt 」+ 「↓」音量を下げる「F1」ショートカットキー一覧を見る（ダイアログボックスを表示）いかがでしたでしょうか。ショートカットキーを使ってプレゼンテーションをすれば、画面上にメニューを出さずとも操作ができるので、すっきりとしたスライドになること間違いなしです。是非ショートカットキーを使いこなして、プレゼンテーションの腕を上げていきましょう！

PowerPoint

【Windows編】Word(ワード)のショートカットキー20選

皆さんは、ショートカットキーについてご存知でしょうか？いちいちマウスを操作しなくても、キーボードを使って様々な動作ができるショートカットキーは、ぜひ覚えておきたい知識のひとつですよね。今回はWord(ワード)に関連する、厳選したショートカットキーをまとめて紹介します。初めてショートカットキーを使う初心者の方から、確認のために使いたいPC上級者の方まで、Word操作の効率アップにぜひお役立てください。目次新規文書作成ファイルを開く文書を上書き保存する文書を閉じるすべて選択する直前の動作を元に戻す直前の動作を繰り返す選択範囲をコピーする選択範囲を貼り付ける選択範囲を切り取る書式をコピーする書式を貼り付ける文字列を太字にする文字列を斜体にするフォントサイズを大きくする・小さくする文書を印刷する（ダイアログボックス表示）フォントサイズを大きくする・小さくする印刷プレビューを表示する改ページする次のページへ移動前のページへ移動覚えておきたいWordショートカットキーまとめ新規文書作成　「Ctrl」+「N」新しく文書を作成したい時、このショートカットキーを使えばいち早く新規文書を作成することができます。他の文書を開いたままでも、「Ctrl」を押しながら「N」を押すことで白紙の文書が作成されます。 [PR] iPhoneアプリ開発コースファイルを開く「Ctrl」+「O」前に作成したファイルを開きたい、そんな時にオススメのショートカットキーです。「Ctrl」を押しながら「O」を押すことで、「ファイルを開く」のダイアログボックスを表示することができます。文書を上書き保存する「Ctrl」+「S」せっかく文書を書き終えたのに、保存ができておらずデータが消えてしまった！なんて経験をしたことがある人は多いのではないでしょうか。「Ctrl」を押しながら「S」を押す動作を指に覚えさせることで、マウスを操作しなくても簡単に文書を保存することができます。保存忘れなどのミスも防げるようになるので、優先的に覚えておきたいショートカットキーです。文書を閉じる「Ctrl」+「W」開いているファイルを閉じたい時に便利なのが、このショートカットキー。「Ctrl」を押しながら「W」を押すことで、開いているファイルを閉じることができます。 ※この時ファイルは閉じられますが、Wordは起動したままになっています。 Word自体も閉じたい時には、「Alt」＋「Ctrl」を押すことで終了させることができます。すべて選択する「Ctrl」+「A」すべての文書を選択したいときに、マウスを操作してドラッグする、なんて面倒な操作とはもうおさらば！「Ctrl」を押しながら「A」を押すことで、挿入している図形や表、画像まですべて選択することができます。直前の動作を元に戻す「Ctrl」+「Z」作業中、うっかり文字列を消してしまった、なんてことありませんか？そんな時には、落ち着いて「Ctrl」を押しながら「Z」を押してみましょう。ひとつ前の動作に戻ることができます。「Z」を押した回数だけ、動作を戻すことができるので大変便利です。直前の動作を繰り返す「Ctrl」+「Y」同じ動作を他の文字列にも適応したい時ってありますよね。例えば、太字にする動作をもう一度繰り返し使いたい時には、「Ctrl」を押しながら「Y」を押すことで簡単に同じ動作を繰り返すことができます。選択範囲をコピーする「Ctrl」+「C」選択した文字列や表、図などをコピーしたい時、わざわざ右クリックでメニューを呼び出してコピーを探すと、少々手間がかかりますよね。「Ctrl」を押しながら「C」を押すだけで、簡単に選択した範囲をコピーすることができます。下記で紹介する「切り取り」と「貼り付け」のショートカットキーと合わせて覚えることで、作業効率が格段にアップします。選択範囲を貼り付ける「Ctrl」+「V」先ほど紹介した「コピー」と合わせて使いたいショートカットキーです。「Ctrl」を押しながら「V」を押すことで、コピーした文書や表、図などを簡単に貼り付けることができます。選択範囲を切り取る「Ctrl」+「X」上述の「コピー」「切り取り」と一緒に覚えたいショートカットキーです。「Ctrl」を押しながら「X」を押すことで、選択した範囲を切り取ることができます。「コピー」、「貼り付け」、「切り取り」の3つの動作は、他のアプリケーションでも同様のショートカットキーであることが多いので、確実に覚えて活用しましょう！書式をコピーする「Ctrl」+「Shift」+「C」同じ書式を別の文字列にも適応させたい！そんな時に便利なのがこのショートカットキー。「Ctrl」を押しながら「Shift」と「C」を押すことで、選択範囲の書式をコピーすることができます。書式のコピーの場合は、文字列のコピーとは違い、「Shift」同時に押すことをお忘れなく！書式を貼り付ける「Ctrl」+「Shift」+「V」書式のコピーと合わせて覚えたいショートカットキーです。書式をコピーした後、「Ctrl」を押しながら「Shift」と「V」を押すことで、コピーした書式を何度でも、複数箇所の文字列に適応させることができます。文字列を太字にする「Ctrl」+「B」文字列を強調したい時に、太字にする機能を使うことってよくありますよね。そんな時には、「Ctrl」を押しながら「B」を押すことで簡単に太字にすることができ、さらにもう一度ショートカットキーを押すことで解除もでき、とても便利です。文字列を斜体にする「Ctrl」+「I」上述の太字にする機能と合わせてよく使う、文字列を斜体にする機能ですが、「Ctrl」を押しながら「I」を押すことで簡単に行うことができます。太字と同様に、ショートカットキーをもう一度押すことで解除ができるので、合わせて覚えましょう！フォントサイズを大きくする・小さくする「Ctrl」+「]」・「Ctrl」+「[」頻繁に行うフォントサイズを変える動作、ショートカットキーを覚えて作業をスムーズにしたいですよね。「Ctrl」を押しながら「]」を押すごとに1ポイントずつ大きく、「Ctrl」を押しながら「[」を押すごとに1ポイントずつ小さくすることができます。文書を印刷する（ダイアログボックス表示）「Ctrl」+「P」文書を印刷したい時に使いたいショートカットキー。「Ctrl」を押しながら「P」を押すことで、「文書を印刷する」のダイアログボックスを表示させることができます。下記の「印刷プレビューを表示する」と一緒に覚えたいですね。印刷プレビューを表示する「Ctrl」+「F2」印刷したらどういうレイアウトになるのか、プレビューが見たい！そんな時には、「Ctrl」を押しながら「F2」を押すことですぐにプレビュー画面を開くことができます。改ページする「 Ctrl」+「Enter」この段落からページを変えたい！そんな時に便利なのがこのショートカットキーです。改ページをしたい位置にカーソルを合わせて、「Ctrl」を押しながら「Enter」を押すことで簡単に改ページをすることができます。次のページへ移動「Ctrl」+「PageDown」たくさんページがある文書を作成している時に、いちいちマウスでスクロールしながらページを移動していくと時間がかかってしまいますよね。カーソルの位置を基準として、「Ctrl」を押しながら「PageDown」を押すと次のページへと移動することができます。前のページへ移動「Ctrl」+「PageUp」前述の「次のページへ移動」と一緒に覚えておきたいショートカットキーです。同様にカーソルの位置を基準として、「Ctrl」を押しながら「PageUp」を押すことで前のページへと移動することができます。覚えておきたいWordショートカットキーまとめキー機能「Ctrl」+「N」新規文書作成「Ctrl」+「O」ファイルを開く「Ctrl」+「S」文書を上書き保存する「Ctrl」+「W」文書を閉じる「Ctrl」+「A」すべて選択する「Ctrl」+「Z」直前の動作を元に戻す「Ctrl」+「Y」直前の動作を繰り返す「Ctrl」+「C」選択範囲をコピーする「Ctrl」+「V」選択範囲を貼り付ける「Ctrl」+「X」選択範囲を切り取る「Ctrl」+「Shift」+「C」書式をコピーする「Ctrl」+「Shift」+「V」書式を貼り付ける「Ctrl」+「B」文字列を太字にする「Ctrl」+「I」文字列を斜体にする「Ctrl」+「]」・「Ctrl」+「[」フォントサイズを大きくする・小さくする「Ctrl」+「P」文書を印刷する（ダイアログボックス表示）「Ctrl」+「F2」印刷プレビューを表示する「 Ctrl」+「Enter」改ページする「Ctrl」+「PageDown」次のページへ移動「Ctrl」+「PageUp」前のページへ移動いかがでしたでしょうか。初心者の方にとっては、ショートカットキーを覚えながらの作業となるため、はじめは戸惑うこともあるとは思いますが、慣れてくるとPC操作の速さが格段に上がります。指が慣れるまで根気強く取り組んで、スピーディなWord操作を目指しましょう！

Word

PHPの配列でjoinメソッドを使う方法を現役エンジニアが解説【初心者向け】

PHPで配列を結合する方法について、テックアカデミーのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。 PHPではさまざまな方法で配列を結合できますので、この記事では用途に合わせた使い分けについて解説しています。目次ショートカットキーの説明の前にcmd+1：左ペインファイルツリーの表示cmd+4：error/Warningツリーの表示cmd+0：左ペインの表示/非表示cmd+opt+1：ファイルインスペクタの表示cmd+opt+0：右ペインの表示/非表示cmd+任意のシンボルをダブルクリック：シンボルが定義された所を開くopt+任意のシンボルをダブルクリック：シンボルをリファレンスで検索ctrl+.：入力補完の実行cmd+ctrl+↑/↓：.hと.mの切替cmd+R：iPhoneシミュレータの起動そもそもPHPについてよく分からないという方は、PHPとは何なのか解説した記事を読むとさらに理解が深まります。大石ゆかり PHPの配列を結合するにはどうしたらいいですか？田島悠介配列を結合する方法はいろいろあるけど、array_mergeが使えるよ。ただ連想配列でキーが同じだった場合に値が上書きされるよ。大石ゆかり連想配列？キー？上書き？　なんだか難しそうですね・・・田島悠介聞いただけではイメージするのが難しいかもしれないね。たとえば$sum[5]の「5」の数値が配列の添字、つまりキーだよ。連想配列はこのキーが文字列の配列だね。じゃあ、配列を結合する方法を実際のサンプルコードを使って説明するね。大石ゆかりお願いします！ ※この解説記事では配列のキー（添字）が数値のものを添字配列といい、キーが文字列の連想配列と区別しています。PHPの配列については解説記事「PHPの配列の基本を現役エンジニアが解説【初心者向け】」を、連想配列については解説記事「PHPで連想配列を使う方法【初心者向け】」をご覧ください。 array_mergeで結合する方法 PHPで配列を結合するには、array_merge関数が使えます。複数の配列をひとつに結合した配列を取得できます。構文結合された配列 = array_merge(配列1, 配列2); 配列1の後ろに配列2の要素が追加されて結合された配列が取得できます。 ※引数に指定する配列の数は、ひとつでも3つ以上でも指定できます。 ※結合された配列はarray_merge関数の戻り値で取得します。上記の構文だと配列1そのものが更新されるわけではありません。配列のキーが同じ要素を結合すると？配列が連想配列（キーが文字列の配列）かどうかで結果が異なります。キーが数値の添字配列の場合は、同じキーがあっても添字がゼロから振りなおされ、要素が追加されていきます。キーが文字列の連想配列の場合は、同じキーがあると新しい要素に上書きされて追加にはなりません。添字配列を結合する配列のキーが数値の添字配列をarray_merge関数で結合すると、すべての要素のキーがゼロから振りなおされて追加されます。ソースコード色の名前が入った2つの配列 $colors1と$colors2の要素をarray_mergeで結合し、$colorsに代入します。 $colors1と$colors2の配列はキーが数値のため、結合したときにキーが降り直されます。 <?php $colors1 = array('赤', '緑', '青'); $colors2 = array('シアン', 'マゼンタ', '黄'); //配列を結合 $colors = array_merge($colors1, $colors2); //結合した配列を出力（preタグで改行させる） print_r('<pre>'); print_r($colors); print_r('</pre>'); ?> ※本来なら出力したいWebページ内で<html>タグなどを含める必要がありますが、今回はPHPのプログラムの解説が目的なので省略しています。基本的なPHPの書き方について詳しくは解説記事「基本的なPHPの書き方」をご覧ください。表示結果解説 $colors1 = array('赤', '緑', '青'); $colors1に3つの要素がある配列を代入しています。配列 $colors1の中身は以下のように0から2のキーがあります。 Array ( [0] => 赤 [1] => 緑 [2] => 青 ) ※配列を作成するときに、値だけ指定すると自動的にゼロから始まる添字がついてキーが作成されます。配列の作成について詳しくは解説記事「PHPの配列の基本を現役エンジニアが解説【初心者向け】」をご覧ください。 $colors2 = array('シアン', 'マゼンタ', '黄'); $colors2にも3つの要素がある配列を代入しており、中身は以下の状態です。 Array ( [0] => シアン [1] => マゼンタ

PHP

初心者が知っておきたい！Photoshopの便利なショートカット10選

Photoshopで覚えておくと便利なショートカットについて、TechAcademyのメンター（現役エンジニア）が初心者向けに解説します。今回は知っておくことで作業効率が段違いに上がるショートカットを用途別に22個紹介します。目次ショートカットキーの説明の前にcmd+1：左ペインファイルツリーの表示cmd+4：error/Warningツリーの表示cmd+0：左ペインの表示/非表示cmd+opt+1：ファイルインスペクタの表示cmd+opt+0：右ペインの表示/非表示cmd+任意のシンボルをダブルクリック：シンボルが定義された所を開くopt+任意のシンボルをダブルクリック：シンボルをリファレンスで検索ctrl+.：入力補完の実行cmd+ctrl+↑/↓：.hと.mの切替cmd+R：iPhoneシミュレータの起動田島悠介今回は、Photoshopの作業効率を上げるショートカットキーについて紹介するよ！大石ゆかりショートカットって、そんなに効率がよくなるものなんですか？田島悠介よく使用する機能はメニューを開いてクリックするよりも、手元でさっと実行することで、かなりの時短につながるんだ。大石ゆかりそうなんですね！ぜひ教えてください！初心者が初めに知っておきたいショートカットまずは、基本中の基本である「コピー、複製」のショートカットです。上部メニューや右クリックメニューで操作するのに比べ手数が減りますので、作業が格段に早くなります。 Windows Mac コピーする ctrl + C command + C コピーしたものをペーストする ctrl + V command + V 複製する alt + ドラッグ option + ドラッグまた、作業単位で戻る/進むが手元で自由自在になっていると、非常に気軽にやり直しが行えます。 Windows Mac 1つ前の状態に戻る ctrl + Z command + Z 2つ以上前の状態に戻る ctrl + alt + Z command + option + Z ファイルに関するショートカット作業時の基本となるショートカットです。特にファイルの保存に関しては、左手のホームポジションとして常にキーの上に指を置いておき、保存忘れを防いている方もいらっしゃいます。 Windows Mac ファイルを開く ctrl + O command + O ファイルの保存 ctrl + S command + S ファイルを別名で保存 ctrl + shift+ S command + shift+ S ファイルを閉じる ctrl + W command + W 全てのファイルを閉じる ctrl + alt + W command + option + W [PR] iPhoneアプリ開発コースツールに関するショートカット最低限、以下の2つを覚えておくことをお勧めします。 Windows Mac 一時的に手のひらツールに切り替え space space 自由変形モードにする ctrl + T command + T カンバス全体を動かしたいときは、手のひらツールに切り替えるよりも、spaceキーを押し続けて一時的に切り替える方法が便利です。また、要素のサイズを直感的に変更したい場合には、「自由変形」のショートカットが便利です。画面表示に関するショートカット全体的な仕上がりをチェックする際など、画面を段階的に拡大縮小したり、ガイドを一時的に非表示にしたい時があります。以下も合わせて覚えておきましょう。 Windows Mac 拡大 ctrl + + command + + 縮小 ctrl + - command + - ガイドの表示/非表示切り替え ctrl + : command + : レイヤーに関するショートカット Webデザインを作成する際、レイヤー操作は頻繁に生じますので、以下も覚えておきましょう。 Windows Mac レイヤーの複製 ctrl + J command + J 複数のレイヤーのグループ化 ctrl + G command + G 複数のレイヤーを統合 ctrl + E command + E 不透明度の変更数字キー数字キー「不透明度の変更」について、数字キーと不透明度の関係を以下に示します。 1：10％、2：20％、2のすぐ後に5：25％、0：100％（透過なし）選択範囲に関するショートカットレイヤーマスクの編集時などに威力を発揮するのが以下のショートカットです。特に「選択範囲の反転」は不要な部分を先に選択しておき、キーを押すだけでそれ以外の範囲選択が可能になるのでとても効率的です。 Windows Mac 全てを選択 ctrl +

Photoshop

東京のパソコン教室20選｜自分にあった教室の選び方も紹介

東京23区内の通いやすいパソコン教室をピックアップしました。自分にあった教室を選ぶことによって、資格の取得や転職、スキルの獲得などを目指しましょう。田島悠介今回は、なにか相談受けたんだって？大石ゆかり東京に住んでる友達からパソコンの知識をつけたいって相談を受けたんですが、どこ選べばいいかわからなくて・・・田島悠介それじゃ、自分にあったパソコン教室の選び方と東京にあるパソコンスクールを紹介していくね！大石ゆかりお願いします！目次自分にあった教室の選び方低価格な教室初心者向けの教室転職サポートのある教室フリーランス志望向けの教室資格が充実している教室まとめ自分にあった教室の選び方自分に合う教室の探し方として、自分のニーズを理解するという過程が重要となります。このニーズは、「あまりお金をかけたくない」や「転職までサポートしてほしい」といった具体的なものです。本記事ではそういったニーズに沿ってジャンル分けを行い、それに適した東京23区のパソコン教室について紹介していきます。 [PR] iPhoneアプリ開発コース低価格な教室低価格からスタートできる教室について、みていきましょう。「パソコン教室には通ってみたいけど、あまりお金をかけたくはない」という方におすすめの教室をまとめたので、ぜひ参考にしてください。キュリオステーション特徴キュリオステーションの最大の特徴は、覚えるまで通える「安心定額のシステム＆個別指導型レッスン」です。支払う費用は「初期費用となる所定のコース料金(コースにより11,000円から)＋月額3,300円」が基本となる料金システム。目的や希望に合わせて安価に無駄無くコースを選択し、納得するまで教えてもらえるのが大きな特徴です。プラン・コース一覧パソコンの基本操作、パソコンの活用、Officeの基礎・応用、MOS資格対策・模擬試験、ホームページビルダーやワードプレスを利用したホームページ作成　ほか料金コース料金(コース1つにつき1回限り11,000円から)＋月謝(3,300円) ※スクールにより多彩なコース・料金プランあり就職・転職サポートキャリアコンサルタントによる就職相談、転職アドバイスを実施するスクールがあります。就職・転職支援講座を開講するスクールがあります。住所・アクセス「下高井戸店」世田谷区赤堤5-31-3フレンド104ビル1F 「武蔵小山店」品川区小山3-23-19芙蓉ビル1F左「永福町店」杉並区大宮2-14-1ライオンズマンション西永福1F 「萩窪店」杉並区天沼3-11-6 「大泉学園店」練馬区東大泉1-20-36 脇坂ビル1F 「成増店」板橋区成増2-17-2 ラフィネ・イムーブル1F 「足立区役所前店」足立区梅島2-1-19 冨岡ビル1F 「菊川店」墨田区菊川3-21-11 レジデンス須賀菊川101 「つつじヶ丘店」調布市つつじヶ丘2-1-2 エクセルハイツⅤ 1F 「新中野店」中野区本町4-38-26 マーブル新中野102号「北千住店」足立区千住中井町17-15 花井ビル1F 「久米川店」東村山市栄町2-7-28 シュウエイ久米川ビル1F ホームページURL https://curiostation.com/ 割引制度無料体験ありスクールごとに割引キャンペーンの開催あり(不定期) パソコンスクールメディアック特徴パソコンスクールメディアックの最大の特徴は月謝の値段です。月額¥3,300で回数、受講制限なしで通うことができます。また、少人数制で集中して受講できるため、値段重視で決めたいという方にはおすすめのパソコン教室です。プラン・コース一覧基礎コース、便利活用コース、デジカメコース、ビジネスコース、ホームページコース料金月謝：¥3,300 住所・アクセス「上板橋教室」〒174-0076 東京都板橋区上板橋1-26-8 「住吉教室」〒135-0003 東京都江東区猿江　2-12-1 ホームページURL http://www.mediac-ps.com/ 割引制度無料体験ありフォーティネットパソコンスクール特徴フォーティネットパソコンスクールは、完全予約制のマンツーマン授業を行えるパソコン教室です。会社で作成する必要があるデータベースやプログラムなどを、持ち込むことで一緒に考えてくれるという珍しい授業のスタイルも用意されていることが特徴となっています。プラン・コース一覧ポイントレッスン(完全フリーで質問可能)、Office基礎知識、 VBA、パソコン基礎知識　ほか料金ポイントレッスン：¥4,400 その他コース：¥9,900～住所・アクセス〒111-0032 東京都台東区浅草2-2-1 森田ビル2F ホームページURL http://www.fortynet.co.jp/ 割引制度 2名同時授業で授業料10％OFF、3名以上は授業料30％OFF アニッシュインターネットスクール特徴アニッシュインターネットスクールの特徴は、1時間¥1,000～と設定されている安価な料金体系です。月謝制でもう少し安価なパソコン教室もあるものの、時間制であれば、全く行けない月だと支払いが全く発生しない点がメリットです。そのため、「行きたい時に安く通いたい」という方におすすめのパソコン教室です。プラン・コース一覧 Office基礎知識、パソコン基礎知識、イラストレーター、 CAD、パソコンで塗る水彩画、パソコン組立講座、　ほか料金 1時間¥1,000～住所・アクセス〒130-0002 東京都墨田区業平５－１０－２ TEL: 03-3829-0885 ホームページURL http://www.anish.jp/ 割引制度無料体験授業あり初心者向けの教室「パソコンで年賀状を作ってみたいけど、そもそもパソコンに触ったことがない」方や「社会人になってからちゃんとパソコンを触るようになった」方なども安心して入校できるパソコン教室をまとめました。科学技術館パソコン教室特徴この教室の特徴としては、教職員の方向けの講座が実施されているという点です。また、自習形式での時間もあるため、「親族に何度も同じ質問をして嫌な顔をされてしまった」といった方におすすめの教室です。プラン・コース一覧 Windows10講座、Office基礎知識、いまどきのパソコン旬な使いかた講座(自習形式)　ほか料金チケット制 1枚：￥4,180 5枚：￥19,250 10枚：￥33,900 ※別途テキスト代(￥510)が必要住所・アクセス〒102-0091 東京都千代田区北の丸公園2-1 ホームページURL http://kagakupc.jp/ 割引制度とくになしパソコン教室ビットラボラトリ四谷校特徴パソコン教室ビットラボラトリ四谷校の最大の特徴は、「1日速習」です。通常は数日かけて学習する内容を、短時間でポイントを絞って効率よく指導できるプランです。その日だけの金額を払えば済む点から金額的にも安心だといえます。プラン・コース一覧 Office基礎知識、ホームページ作成(HTML・CSS)、 IOT講座、Python、ほか料金 Office・ホームページ作成など、1日速習講座料金：¥21,780 その他のコースに関してはコースによって異なります。住所・アクセス「四谷校」〒160-0004 東京都新宿区四谷3丁目7 宮子ビルディング5F ホームページURL https://www.bitlab.jp/ 割引制度ママ割・学割完備商工会議所パソコン教室特徴商工会議所パソコン教室は全国に111教室を構えている大手のパソコン教室です。そもそも「パソコンを触ったことがない」方に人気のパソコン教室となっているため、初心者の教室の方におすすめの教室となっています。プラン・コース一覧パソコン基礎知識、Office基礎知識、資格対策講座(日商PC検定、簿記)、趣味講座(ホームページ作成、デジカメ)、スマホ/モバイル講座　ほか料金授業料：¥1,000(1時間) 機器使用料：¥200(1時間) 教室維持費：¥1,400(月1回) 住所・アクセス「町田教室」〒194-0013 東京都町田市原町田3-3-22 町田商工会議所2階「多摩境教室」〒194-0215 東京都町田市小山ヶ丘2-2-5-8 まちだテクノパークセンタービル3階「吉祥寺教室」〒180-0004 東京都武蔵野市吉祥寺本町1-8-22 吉祥寺パレスビル6階「武蔵境教室」〒180-0023 東京都武蔵野市境南町2-3-4 五番館ビル5階「青梅商工会議所教室」〒198-8585 東京都青梅市上町373-1 青梅商工会議所2階「多摩商工会議所パソコン教室」〒206-0011 東京都多摩市関戸1-1-5 ザ・スクエア2階ホームページURL https://www.pcci-school.com/ 割引制度特になしパソコン教室パソカレッジ高田馬場駅前特徴パソコン教室パソカレッジ高田馬場駅前はMOS資格取得希望者に人気の教室です。他のパソコン教室には少ない特徴として、Macの使い方に関する講座があります。また、1日短期講習もあるので、「Officeの基礎知識などを短期的に習得したい」と考えている方にもおすすめのパソコン教室です。プラン・コース一覧 Mac講座、Office基礎講座、MOS資格対策講座、ほか料金入会金：¥5,500 チケット制：10時間チケット¥16,500〜 1日短期習得講座：1日6時間¥20,800 ※短期講座は入会金が不要です。住所・アクセス東京都新宿区高田馬場3−3−1 ホームページURL https://baba-pasocollege.com 割引制度特になしパソコン市民講座特徴パソコン市民講座は子供から大人に対して、約800種類の講座を受けることができる教室です。また、映像配信学習にも対応しており、忙しくて実際に教室に行かなくても自宅で学習することが可能です。プラン・コース一覧 MOS資格対策、サーティファイ対策、パソコン基本操作、タブレット・スマホ基本対策、子供向けパソコン講座　ほか料金入会金(初回のみ)、1時間あたり¥1,650、テキスト教材費住所・アクセス「丸井吉祥寺教室」〒180-8552 東京都武蔵野市吉祥寺南町1-7-1 丸井吉祥寺3F 「丸井錦糸町教室」〒130-0022 東京都墨田区江東橋3-9-10 丸井錦糸町店 5F 「神保町駅前教室」〒101-0051 東京都千代田区神田神保町2-14 SP神保町ビル5F 「イトーヨーカドー金町教室」〒125-0041 東京都葛飾区東金町1-10-8 イトーヨーカドー金町店 2F 「イトーヨーカドーアリオ亀有教室」〒125-0061 東京都葛飾区亀有3-49-3 イトーヨーカドーアリオ亀有店 3F 「ダイエー東大島教室」〒136-0072 東京都江東区大島7-38-30 ダイエー東大島店4F 「ダイエー西八王子教室」〒193-0835 東京都八王子市千人町2-1-9 ダイエー西八王子店中3F 「上野マルイ教室」〒110-8502 東京都台東区上野6-15-1 上野マルイ 7F 「中野マルイ教室」〒164-0001 東京都中野区中野3-34-28 中野マルイ3F 「イトーヨーカドー竹の塚教室」〒121-0813 東京都足立区竹の塚5-17-1 イトーヨーカドー竹の塚店5-17-1 イトーヨーカドー竹の塚店2F 「亀有駅前教室」〒125-0061 東京都葛飾区亀有3-26-1 亀有リリオ館6F 「イトーヨーカドー葛西教室」〒134-0084 東京都江戸川区東葛西9-3-3イトーヨーカドー葛西店3F 「大泉学園ゆめりあ教室」〒178-0063 東京都練馬区東大泉1-29-1ゆめりあ1街区8F 「西友福生教室」〒197-0021 東京都福生市東町5-1 西友福生店5F ホームページURL https://www.pc4353.net/ 割引制度小学生から大学生まで学割料金で受講できます。ディードットステーション特徴ディードットステーションの特徴は、月々¥3,240で通い放題という点です。初心者の方から資格取得まで通うなど、様々なニーズに応えることができる教室です。「金額は安く済ませて、パソコンの基礎から学びたい」方におすすめのパソコン教室となっています。プラン・コース一覧パソコン入門知識、Office基礎知識、パソコン活用知識、キッズプログラミング、ホームページビルダーを使用したホームページ作成、MOS　ほか料金コース料金の初期費用＋月謝(¥3,240) 住所・アクセス「三軒茶屋教室」東京都世田谷区太子堂3-18-3 1F 「久が原教室」東京都大田区南久が原2-9-7 1F ホームページURL https://dstation.jp 割引制度特になし（無料体験あり）東京パソコンスクール特徴パソコンに触れたことが無い方からMOS試験の対策を行いたい方におすすめのパソコン教室です。中高年に人気のアットホームな教室で、授業後にはコーヒータイムでくつろげる教室になっています。プラン・コース一覧パソコン基礎知識、Office基礎知識、MOS試験対策講座、 Windows講座、パソコン周辺機器講座　ほか料金月謝制 4回/月：¥12,980 8回/月：¥23,100 12回/月：¥35,200 チケット制 6回/60日：¥21,010 住所・アクセス〒181-0013 東京都三鷹市下連雀3-28-23三鷹センター商店街2階ホームページURL http://www.tokyopc.co.jp/ 割引制度特になし転職サポートのある教室「パソコン教室でスキルを習得し、最終的には身に付けたスキルが活かせる仕事に就きたい」と考えている方に対し、就職・転職のサポートを行ってくれる教室があります。ここでは、そういった転職サポートのあるパソコン教室をまとめました。 Winスクール特徴パソコン教室の中でも大手であり、全国各地に教室があるWinスクールです。特徴として、就職のサポートが手厚い点が挙げられます。また、厚生労働省の「教育訓練給付制度」だけでなく、企業向け助成金制度にも対応しています。プラン・コース一覧 AutoCAD、SolidWorks、HTML・CSS、 Adobe製品講座、PHP、CCNA対策講座、 C・C#、Python、Office基礎知識　ほか料金資料請求が必要です。就職・転職サポート Winスクール受講生限定でサポートしてくれる制度が設けられています。住所・アクセス「新宿本校」東京都新宿区西新宿1-7-1松岡セントラルビル 3F 「渋谷校」東京都渋谷区渋谷1-24-4渋谷こうゆうビル 4Ｆ「池袋校」東京都豊島区東池袋1-20-3MAKIビル 4F 「銀座校」東京都千代田区有楽町2-10-1東京交通会館ビル3F 「秋葉原校」東京都千代田区神田平河町1第三東ビル7F 「品川校」東京都港区高輪3-25-33長田ビル

プログラミング

「Sketch vs. Figma」デザインツールとして優れているのはどちらか

本稿は、Smashing Magazineのブログ記事を了解を得て日本語翻訳し掲載した記事になります。本記事は、WebデザイナーであるChristian Krammer氏によって投稿されました。 UIデザインツールはこれまでにおいてかなりの人気を集めてきました。Affinity Designerや、Gravit、Sketch等の素晴らしいアプリケーションが大きく進化した一方でAdobe XD （Adobe Experience Designの略）やFigma のようなプレイヤーもこのフィールドに参入してきました。個人的には後者に最も魅力を感じます。Sketchとの類似性から、Figmaも最初の段階から簡単に正しく理解できました。更にFigmaは簡単なファイルの共有やvector networks、「constraints」(レスポンシブデザイン向け）、リアルタイムコラボレーションのような他の使い易い競合相手とは明確に違う独自の個性があります。この記事ではSketchとFigma 両方のアプリケーションを細部に渡り比較し、それぞれの長所がどのような点かに焦点を当てていきます。 Sketchの最大の弱点は常にAppleのエコシステムにロックインされている事です。設計するだけではなく、ファイルを開きチェックするのにもMacが必要です。WindowsやLinux上では全く機能しません。その為しばらく経つとSketchファイルのスペックを持つ有料のサービスが現れた訳ですが、それにしても厄介で余分な手順です。上：Sketch 下：Figma これが恐らくFigmaが最初の段階から一線を画す理由の1つです。すなわち、世界中基本的にどのデバイスでもFigmaはWebブラウザで使うことができます。どのインストールも一切不要です。ただChrome（又はFirefox）を開いてアカウントを作成して設計を開始するだけでいいのです。私は以前からずっとブラウザベースのツールを躊躇していましたが、Figmaは一瞬で私の懸念を仏拭しました。Figmaは多数の要素を含みながらもSketchと同様高性能です（もし同様でなければFigmaの方がより高性能です）。 WindowsやMac用のFigmaのスタンドアローンデスクトップアプリも入手可能ですが、基本的にそれらはただのブラウザバージョンのラッパーにすぎません。それらはキーボードショートカットにより優れた一方で、常にオンライン上にいなければなりません。勝者：Figma 理由：プラットフォームに依存しないためユーザビリティ（特徴的機能とユーザーインターフェース）基本的に、FigmaはSketchのインブラウザ版と呼ぶのが最も相応しいでしょう。機能はほぼ同じ、インターフェースも似ている、キーボードショートカットでさえもほぼSketchから受け継いでいる。もし既にSketchを知っていれば、Figmaが2016年の始めにリリースされた時にすぐに簡単に使いこなせるようになったでしょう。 Figmaはリリース当初から様々な点において改善され、いくつかの部分ではSketchを上回ってきました。しかし、プラグインやサードパーティ・ツールとの統合、リアルデータを利用できる機能（Craft Pluginも使用して）など、欠けている機能が未だにいくつかあります。それにも関わらず、この調子で改善が進むとFigmaがSketchに肩を並べるのはもはや時間の問題でしょう。勝者：引き分け理由：現時点では大差はありません。しかしSketchの方があなたの仕事を効率化させる要素を持ち合わせています。価格 Sketchは元々新しいバージョーンごとに約99USドルの初回手数料のみで発売されました。しかしやがてこのビジネスモデルは維持不可能だと判明されます。Bohemian Coding社は最近価格を定期購入が必要なモデルに変更しました。99USドルで1年間の無料アップデートが入手できます。その後はそのまま使い続けることができるか、更に同額を支払うことでまた別の1年アップデートが行えます。この値上がりは当初不適切なように見受けられましたが、デザイナーとしてあなたのメインツールへの99ドルの価値とは何でしょうか？そうです、大した額ではありません。 Adobe’s Creative Cloud の定期購入よりはまだ安いのです。（又、Sketchは何の問題もなく使い続けることができる一方、Creative Cloud の定期購入を辞めたらどのAdobe CC アプリも使い続けることができなくなります。）当分の間は、Figmaは全ての人が無料で使えるようになっていますが、今年後半には変わってくるでしょう。きっと定期購入制になり、月額10~15USドルになるでしょう（あくまで私個人の見解ですが）。確かな事は1つあります。それは、Figmaは学生に対して常に無料でしょう。（Sketchが教師と学生に対しリーズナブルなディスカウントを提供しているのと似ています。）勝者：引き分け理由：Figmaの価格に関する発表はまだない為 [PR] iPhoneアプリ開発コースコラボレーション機能 Figmaの主な差別化要因は恐らく「マルチプレイヤー」と呼ばれるリアルタイムコラボレーション機能でしょう。その機能を使って他のユーザーと同時に1つのファイルを編集することができるだけでなく、他のユーザーがデザインをいじっているのを見たり、内蔵型のコメント機能を使って変更を知らせることができます。 1つの例として、この同時編集はプレゼンテーションやリモートチームにとって素晴らしく、また関わっている全てユーザーが同じ状態を確認し、意図していなかった上書きを防ぐことができます。 Sketchには（プラグインを使用してですら）そのようなコラボレーション機能はありませんし、多分そのような機能がない方がSketchにとってはよいのかもしれません。なぜなら「このボタンをもっと大きくしよう。ちょっと待てよ、勝手にやっちゃえ！」というような結末をもたらすかもしれないからです。もちろんこれは少し大げさな例です。この機能は多少価値はありますが、事前に特定のルールを決めておかないとリスクがあります。勝者：Figma 理由：同時に同じファイルを複数の人で共同編集できる為ファイル共有とスペックリアルタイムコラボレーション機能に幾らか関連しているのは設計ファイルの共有です。なぜならFigmaではすべての事がブラウザで行われるため、全てのファイルが必然的にURLを持っていて、それを同僚や上司に送ることができます（閲覧専用モードでも可能です）。このブラウザベースのアプローチの別の大きな利点は、開発者をはじめ全ての人がサードパーティツールの必要性なしにすぐにデザインを開き検証できることです。 Figmaでは簡単に他のユーザーとデザインを共有できます。これはまさに、1つのファイルにおいて必要不可欠な全ての情報（例えばフォントサイズや色、寸法、アセットなど）を他の共同制作者に提供するためにSketchに求められているものです。しかしながら、前にも述べたように、ここであなたを手助けするZeplinやSimpli、InVisionの Inspect、Avocode、Marklyなどの有料のツールが必要です。公平な立場からみて、最初の3つは1つのプロジェクトでは無料ですが、より複雑なものに取り組む際にはそれだけでは十分ではないでしょう。更に何らかのツールを必要としている場合や、そのような（正直なところ基本的な）機能にお金をかけたくないというのであれば、MarketchやSketch Measureという無料のプラグインもあります。多くの有料のアプリではコメントを追加したり自動的にスタイルガイドを作成することができます。あるいは、FigmaはSketchのファイルフォーマットをサポートしているので、SketchのファイルをFigmaにインポートしてチェックすることさえできます。左上から右下順に:Avocode、Zeplin、Simpli、Markly。これら全てにおいて様々な方法でSketchのデザインの閲覧、共有可能。もし共同編集者とデザインをちょっと見たいだけであれば、内蔵されているSketch Cloudが正にその役割を果たしてくれます。iOSデバイスでデザインを見るには、Sketch MirrorやFigma Mirrorを使って、Androidのデバイスであれば、MiraやCrystalを使用することができます。 FigmaはAndroidベースのアプリを提供しないのですが、（デスクトップコンピューター上で）フレームかコンポーネントを選択後、デバイス上で「www.figma.com/mobile-app」を開くと、1種のプレビューが見れるでしょう。勝者：Figma 理由：サードパーティツールの必要性なしにブラウザ上で簡単にファイルの共有が可能な為ファイルの整理 Sketchには、ページを提供するという組織能力があるため1つのファイルでアプリやWebサイト全体を作ることができ、ページ同士のスイッチも即座に可能です。Figmaはこの点において後れをとっています。 Figmaはページを提供しませんが少なくとも複数のファイルを1つのプロジェクトに結合することは可能です。左：Sketchでは1つのファイルを複数のページに整理でき簡単にスイッチ可能右：Figmaのプロジェクトは未発達アートボードというSketchのもう1つ重要なコンセプトも適応され強化されました。Figmaでは塗りつぶしやボーダー、エフェクトを簡単にアートボードに適用でき、またそれらをネストしたりグループから簡単に作成することもできます。1つの例として、これにより組み合わされた範囲より大きな要素のコンテナも許容され、「constraints」機能の手助けになりうるでしょう。更には、各アートボードには独自のネストされたレイアウトグリッドがあり、それによりレスポンシブデザインに役立つのです。 Sketchでもアートボードをネストすることが可能ですがそのインプリメンテーションはFigmaと比べると全く有効的ではありません。勝者：引き分け理由：Sketchにはページがあるが、Figmaのアートボード（フレーム）はより有効的な為レスポンシブデザイン Figmaが導入した（Sketchにも何ヶ月か経ってから導入された）機能はレスポンシブデザイン、すなわち、どのように要素が異なるアートボードやデバイスのサイズに対応するかを設定した機能です。 Sketchでそのような機能を提供するプラグインが以前からありますが、ちょっと使いにくい感じがありました。「group resizing」という特有の機能だけはFigmaの「Constrains」機能に匹敵して簡単に使用できます。左：Sketchの「group resizing」機能は1つのドロップダウンメニューで設定され慣れるまで少し時間がかかります。右：Figmaの「constraints」機能はより目で見てわかるようになっています。両者とも基本的に同じような動作ですがその見栄えは一目瞭然。Sketchでは4つのオプション付きのドロップダウンメニューしかなく、操作中に一体どんなふうになるなるのかがイメージしずらいです。Figmaはよりビジュアル化した方法でこれらのプロパティを明確にします。例えば、ある要素をアートボードの端に固定するか、それと均一にリサイズする事などができます。 Figmaの大きな利点はこれらの制約がレイアウトグリッドと一緒に組み合わせることで機能することです。要素は、例えばある列（又は行）に固定されるか、それらの幅に一致します。更には、各軸にこれらの設定を個別に変更することができ、グループだけではなくアートボードにも機能します。Sketchではあり得ない機能です。勝者：Figma 理由：その制約機能は遥かに進化していてより多くのオプションがある為ベクトル　マニピュレーション Figmaが発売された時の1つの大きな特徴は「vector networks」でした。もはやベクトルはただ一連の繋がった点（ノード）ではありません。今や、新しい線でどのノードからも分岐する事ができます。例えば、矢印を作るのなんて朝飯前です。 Figmaのvector networksはベクトルのどの点にもセグメントを追加することができます。しかしそれよりも遥かに勝っているものがあります。ベクトルのパーツはPaint Bucketツールで簡単に塗りつぶされる（又は削除される）事ができます。ベンドツールを使ってセグメント全体を動かす（又は曲げる）事も可能です。そして1つのベクトルから別のベクトルへ線点も同様に）をコピーするのは一瞬でできます。 Figmaのvector networksでセグメントを簡単に動かしたり曲げたりする事ができます。この特殊な機能1つでFigmaはSketchと一線を画しており、アイコンデザインに適したものになっています。それに比べ、Sketchで利用可能なツールはほぼ時代遅れな感じを受けます。Sketchではベクトルオブジェクトを作成し操作するために必要なすべてのものが揃っているかもしれませんが、より複雑なベクトル操作が必要になってくるとすぐに扱いにくくなるでしょう。はじめの図：Figmaでは、ペイント塗りつぶしツールを使って2つの重複した円の塗りつぶされた部分を削除し1つの輪をつくる。 2番目の図：Sketchではブール演算を用い従来の手法を使っている。(ちなみにこの方法はFigmaでも可能) ほとんどの場合、Sketchではある特定のタイプの形を作るのにブール演算を使用しなければいけませんが、その多くはFigmaのvector networksではより簡単に作成可能です。Sketchでは2つのベクトルオブジェクトを繋げたり、またはブール演算が適用された後に形を平らにすることさえしばしば難しいという事実がさらに物事を悪化させます。このアプリはこの点において問題が山積みなのは確かです。勝者：Figma 理由：vector networksは全く新しい次元をベクトルマニピュレーションにもたらします。Sketchにおいてはまだそれと匹敵するものはありません。サポートされているファイルの種類新しいアプリケーションが出るたびに、もしプロジェクトを移行したければ全てをやり直さなければいけないという問題によく直面するでしょう。Figmaではそうではないのです。見事なほどに正確な方法でSketchのファイルを開くことができ、この時点で既にFigmaが優位です。残念なことに逆パターンでは機能しません。1度Figmaでデザインをスタートしたらもうそれを使い続けるしかないのです。SketchにエクスポートすることもPDFファイルを作成すること（またはインポートすること）もできません。SVGにエクスポートするオプションもありますが、デザインアプリケーション間で複雑なファイルをエクスチェンジするのに理想的なフォーマットではありません。エクスポートオプションは一見似ていますがSketchにはより多くのオプションがあります。左：Sketch 右：Fiigma もう1つの制限要因はJPG画像をFigmaでエクスポートしたときにその品質水準を設定できないことです。なので画像を最適化する他のアプリケーションが必要になるかもしれません。Sketchの最新版ではさらにもっとエクスポートのオプションが改善しています。現在ではファイル名に接頭辞と接尾辞の両方を設定できると同様、Androidへのエクスポートをはるかに簡単にさせるエクスポートプリセット機能があります。各アプリケーションがサポートするエクスポートファイル形式を見てみましょう。 Sketch PNG JPG TIFF WebP PDF EPS SVG Figma PNG JPG SVG 勝者：Sketch 理由：より多くのファイル形式とより良い保存、エクスポートのオプションがある為アクセシビリティ FigmaにはSketchで使用できる多くのショートカットキーがありますが、そのアクセシビリティのレベルは同じではありません。Sketchではほぼ全ての事がキープレスで行うことができます。もし気に入らないショートカットキーの組み合わせがあればあなた独自のやり方をシステム環境設定で登録することが可能です（デフォルトによって割り当てられないショートカットコマンドが主になる傾向があります）。 macOSのシステム環境設定でSketchのあなた独自のショートカットキー設定が可能 Figmaはブラウザ上に存在しているためそのようなことは一切不可能です。デスクトップアプリでその点を補うことができますが、特定のメニューバーコマンドが無いせいである特定の機能を単純にキーボードに割り当てることは不可能です。勝者：Sketch 理由：そのアプリケーションのほぼ全ての機能がショートカットキーでアクセスすることができ、更にはカスタマイズできる為シンボル（コンポーネント） 1つの重要な機能がちょうどFigmaに導入されました。それはシンボル、又はここではコンポーネントと呼びます。コンポーネントを使用すると、「instances」の形式で簡単に再利用できる1つの複合オブジェクトにいくつかの要素をを組み合わせることができます。主要なコンポーネントが変更されるとすぐに、全てのインスタンスがその変更点を受け継ぎます。（しかしながら、その同じコンポーネントのバリエーションを考慮して特定のプロパティは個別に修正されます。）最近では、Figmaではファイル間や複数のユーザーと一緒に共有できるコンポーネントのライブラリを作成することさえ可能です。これは確固たるデザインシステムへの大きなステップです。 Sketchでは、個々のインスタンスの修正がインスペクタパネル上でオーバーライドの形で処理されるので、各インスタンスごとにテキスト値や画像の塗りつぶし、ネストされたシンボルの変更が可能です。 Figmaでは、塗りつぶし、ボーダー、効果（影やぼかし）を含め、キャンバスで直に1つの要素のプロパティをアップデートすることができます。上：Sketchではインスペクタパネル上でオーバーライドを使用してシンボルインスタンスの内容を変更します。下：Figmaではテキストの色を含め直接キャンバスキャンバスでコンポーネントのインスタンスをカスタマイズできます。シンボル（コンポーネント）の真の強みはレスポンシブデザインで発揮されます。どちらのアプリでも、親のサイズが変更された時にどの様に要素がシンボル内で反応するか定義することができ、異なる場所や画面のサイズでシンボルを使うこともできます。 Figmaが未だに後れを取っている領域はレイヤーやテキストスタイルです。形やテキストレイヤーのスタイリングを保存することができなく、他の要素と同期することも不可能です。しかしながら、1つの要素から別の要素にスタイリングをコピーして貼り付けることはできます。勝者：引き分け理由：インプリメンテーションは極めて同じレベルですが、Figmaはその共有可能なコンポーネントでわずかに有利です。プラグイン Sketchは並外れて素晴らしい機能を兼ね備えていますが、それを決定打にしているのはSketchを強化させたり足りない機能を補うサードパーティプラグインの存在でしょう。 1度に複数のレイヤーの名前を変更したり、ダイナミックボタンを作成したり、カラーパレットを保存し読み込んだり、Unsplashから簡単に画像を挿入したり、Git機能を有効化したり、Sketchの中でアニメーションを創り出すことができたりなど、使用目的は様々です。プラグインの全リストは公式ディレクトリやGitHub上で見ることができます。公式WebサイトとGitHubの両方で、Sketchの膨大なプラグインのセレクションを閲覧可能です。では、Figmaですが、現段階では全くそのような機能はありません。公平に言うと、Sketchは恐らく開発の初期段階ではこれらの多くの機能はありませんでした。そして将来的にはFigmaにもプラグインエコシステムが導入されるのは確実でしょう。注意したいこと：プラグインがSketchに大きな利点を与えた一方で、それらが何かしらの落とし穴にもなりえます。それらは新しいリリースの度に正常に機能しない傾向があり、Sketchチームは将来の開発者たちを遠ざけないためにも細心の注意を払う必要があります。勝者：Sketch 理由：単純に、Figmaにはプラグインが全くない為プロトタイピング AdobeXDと違ってSketchもFigmaもプロトタイピング機能が備わっていません。今のところFigmaには導入される予定はありませんが、Sketchには少なくとも基本的なプロトタイピング機能をもたらすCraft Pluginがあります。更にその人気でSketchは他のプロトタイピングツールとの幅広く統合することが可能です。例をいくつか挙げると、InVision、 Marvel、Proto.io、Flinto、Framerなどがあります。これらを一緒に使うことによって簡単にデザインをインポートしてアプリを同期することができます。現時点でFigmaと動作する唯一のアプリケーションはFramerです。似たようなツールのサポートが将来どのようになっているか述べるのは難しいですが、そのようなインターフェースが既に製作段階かもしれません。勝者：Sketch 理由：Craft Pluginには説得力のあるプロトタイピング機能がありませんが、Sketchは多くのプロトタイピングサービスと統合している為実データでの作成 Sketchが提供する数あるプラグインの中でいわゆる「content generators」というものを見つけるでしょう。その一例として、ダミーコンテンツでデザインを埋めることができます。しかし、より興味深いことはこれらのちょっとした機能が様々な情報源から実データを引き出すことを可能にし、またJSONファイルの形で内容を挿入することさえ可能です。これにより設計の初期段階でより情報に基づいた判断ができ、エッジケースも明らかにできます。このカテゴリーで最も優れているのはInVisionのCraft Pluginです。それを使ってある要素に内容を追加するとすぐに、1つのステップで簡単にその内容を複製・変更する事ができます。Craftではデザインのアセットを保存し、チーム内で共有したり又は自動的にスタイルガイドの作成も可能です。他の機能やオプションの中でも、SketchのCraft Pluginでは要素を複製し、同時に他の内容を追加することができます。 Craftよりは優れてはいませんが、似たような機能を持つプラグインがもう数個あります。Sketch Data Populator、Content Generator 、 Day Playerがそうです。 Figmaにはまだそのような機能はありませんが、時間の問題だと思います。Adobe XDが少し前に適応したようにアプリにその機能を統合するのか、もしくはプラグインシステムに依存するのか、どちらの手段をとるか興味深いところです。勝者：Sketch 理由：Sketchでは様々なプラグインで備え付きの機能の不足を補い、簡単に実データを使用できる為バージョニング私がいつも行っていることの1つは、始めの頃のデザインがどのような感じだったか見るためにCommand+Zを使って変更点を1つ1つ元に戻すことです。評価の基準を持つか、新しいイテレーションをベースとして複製するかのどちらかです。Figmaはブラウザ上の限られたリソースのためここで行止まりと思うかもしれませんが、実際はSketchに劣ってはなんかいません。どちらのアプリでも古いバージョンをブラウズして復元する事ができ、自動的に保存されます。しかしながら、Sketchのインプリメンテーションは理想とはかけ離れていて、どこから始めるかもわかりません。何といっても時間がかかるのです。実際に閲覧できる前にバージョンを復元しなければいけなかったり、ハードドライブ上でスペースを無駄にする結果になるかもしれません。さらに言えば、クラウド上で(Dropboxを介してなど)複数の人が同じファイルで作業している時に簡単にダメになってしまう可能性があります。 Figmaでは瞬時に前のバージョンを復元する事ができ、複数の人が同じファイルを編集している時はそれぞれの人の変更を分離できるので役に立ちます。それから前の状態に戻ったり、新しいアイデアの出発点としてバージョンを復元することができます。勝者：Figma 理由：Sketchのバージョニングは不完全過ぎて勝敗は明らかです。テキスト機能他の点と同様に、どちらのアプリケーションでもテキスト操作はかなり似ていますが、いくつかの違いは言及する価値があります。デフォルトによってFigmaではGoogle Fontsからでしか選択できないのですが、単純にインストーラーでシステムォントにもアクセスできます。私が常にSketchに物足りなさを感じる部分はテキストレイヤーのボーダーの位置の変更機能です。ここでは「中心」だけが唯一の選択しです。Figmaにはその他にもシェイプレイヤー用であるかのごとく「内側」と「外側」が選択できます。左：Figmaでは、テキスト枠内の垂直の位置（上）が設定でき、さらにボーダーの位置のオプションがある（下）右：SketchではOpenType機能が適用されるさらにFigmaではテキストを垂直に配列する設定ができる為、枠内で垂直に中央揃えすることが容易です。対照的にSketchではより多くのタイポグラフィのオプションがあり、スモールキャップス、古い形式の図形、スタイルの選択肢や合字（フォントでサポートされていれば）等のOpenType機能が適用できます。勝者：引き分け理由：どちらのアプリケーションもそれぞれ違った利点があります。Sketchの方がその進化したタイポグラフィオプションで少しリードしていますが、完全な勝利にはまだ不十分です。結論簡単に各アプリの長所をおさらいしましょう。 Sketchの良い点キーボードのアクセシビリティがより良くサポートされているプラグインとプラグインエコシステムがあるサードパーティツールとサービスを統合可能ファイルタイプとエクスポートオプションが豊富複雑なプロジェクトを1つのファイル（ページ付き）にまとめることが可能 Sketchでは簡単に実データを使えるより洗練されている Figmaの良い点ブラウザベースなので、世界中どの場所からどのプラットフォームでも使用可能リアルタイムで共同作業できるファイルの共有が簡単ベクトルマニピュレーションが優秀（vector networksを介して）レスポンシブデザインオプションがより優れている（constraint機能により）コンポーネントのライブラリを作成しチームのメンバーと共有可能アートボードがより強力今後の展望 2013年のAdobe Fireworksの廃止はUIデザインツール界に大きな空白を残しましたが、Sketchがすぐにその空白を埋めてくれました。 Sketchが大成功を収め、その人気は主なライバルであるPhotoshopに徐々に迫り、ついには昨年インターフェースデザイナーのユーザー間における調査「the tool of choice」でトップの座に輝きました。 Sketchは恐らくWindows版があればより成功したでしょうが、他のツールにも問題はあります。Affinity

アプリデザイン

記事を検索

ニュース

インタビュー

テクノロジー

キャリア

お問い合わせ

初心者も知っておきたい！Xcodeのショートカットキー10選

ショートカットキーの説明の前に

cmd+1：左ペインファイルツリーの表示

cmd+4：error/Warningツリーの表示

cmd+0：左ペインの表示/非表示

cmd+opt+1：ファイルインスペクタの表示

cmd+opt+0：右ペインの表示/非表示

cmd+任意のシンボルをダブルクリック：シンボルが定義された所を開く

opt+任意のシンボルをダブルクリック：シンボルをリファレンスで検索

ctrl+.：入力補完の実行

cmd+ctrl+↑/↓：.hと.mの切替

cmd+R：iPhoneシミュレータの起動

関連するキーワード

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

【Windows編】パワーポイントで使える便利なショートカットキー20選

【Windows編】Word(ワード)のショートカットキー20選

PHPの配列でjoinメソッドを使う方法を現役エンジニアが解説【初心者向け】

初心者が知っておきたい！Photoshopの便利なショートカット10選

東京のパソコン教室20選｜自分にあった教室の選び方も紹介

「Sketch vs. Figma」デザインツールとして優れているのはどちらか

TechAcademyから
現役エンジニアの方へ
お知らせ

記事を検索

ニュース

インタビュー

テクノロジー

キャリア

お問い合わせ

ショートカットキーの説明の前に

cmd+1：左ペインファイルツリーの表示

cmd+4：error/Warningツリーの表示

cmd+0：左ペインの表示/非表示

cmd+opt+1：ファイルインスペクタの表示

cmd+opt+0：右ペインの表示/非表示

cmd+任意のシンボルをダブルクリック：シンボルが定義された所を開く

opt+任意のシンボルをダブルクリック：シンボルをリファレンスで検索

ctrl+.：入力補完の実行

cmd+ctrl+↑/↓：.hと.mの切替

cmd+R：iPhoneシミュレータの起動

記事を検索

関連するキーワード

関連する記事

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

TechAcademyから 現役エンジニアの方へ お知らせ

TechAcademyから
現役エンジニアの方へ
お知らせ