TechAcademy（テックアカデミー） Webデザインコース Webデザイン Photoshop Photoshopでガイドを数値指定して表示する方法を現役エンジニアが解説【初心者向け】
icon
icon
Photoshop

Photoshopでガイドを数値指定して表示する方法を現役エンジニアが解説【初心者向け】

初心者向けにPhotoshopでガイドを数値指定して表示する方法について解説しています。ガイドを使用することで文字や画像を適切な位置に配置することができます。ガイドの作成方法、数値を指定した操作方法を学びましょう。

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

Photoshopでガイドを数値指定して表示する方法について、TechAcademyのメンター（現役エンジニア）が初心者向けに解説します。

なお本記事は、TechAcademyのオンラインブートキャンプPhotoshop講座のカリキュラムをもとに執筆しています。

 

田島悠介

今回は、Photoshopに関する内容だね！

大石ゆかり

どういう内容でしょうか？

田島悠介

ガイドを数値指定して表示する方法について詳しく説明していくね！

大石ゆかり

お願いします！

目次

 

ガイドとは

ガイドは実際の画像には反映されない目印用の線で、文字やオブジェクトをきれいに配置したいときなどに役に立ちます。

 

[PR] Webデザインで副業する学習方法を動画で公開中

基本的なガイドの表示方法

ウィンドウ内に表示されている定規をドラッグするとウィンドウ内に水色の線が作成されます。

定規が表示されていない場合メニュー「表示」ー「定規」をクリックすると、ウィンドウ内に表示されます。

ガイドを削除したい場合メニュー「表示」ー「ガイドを消去」をクリックすると、作成された全てのガイドが消去されます。

ガイドを非表示にしたい場合メニュー「表示」ー「表示・非表示」ー「ガイド」をクリックすると、ガイドの表示と非表示を切り替えることができます。

 

数値指定してガイドを表示する方法

メニュー「表示」ー「新規ガイド…」をクリックします。

ダイヤローグボックスで、作成したいガイドの方向と位置を設定します。方向：「水平方向」を選択すると横の線が、「垂直方向」を選択すると縦の線が追加されます。位置：水平方向の場合は画像の一番上、垂直方向の場合は画像の一番左からの距離になります。

 

まとめ

ガイドを使用すると、テキストや画像といった形や大きさの違うオブジェクトの位置も正確に合わることでき便利です。

 

監修してくれたメンター

メンターOM

Webデザインの勉強のためロサンゼルスに留学。その後、現地のWeb制作会社に就職し、Webデザイナーとしてのキャリアをスタート。

現在もロサンゼルスで働く傍ら、フリーランスのWebデザイナーとして、アメリカだけでなく日本からのWeb制作も請け負う。
また、画像のリタッチが得意なので、しばしばリタッチの依頼も請け負う。

 

大石ゆかり

内容分かりやすくて良かったです！

田島悠介

ゆかりちゃんも分からないことがあったら質問してね！

大石ゆかり

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

 

TechAcademyでは初心者でも1週間でフォトレタッチをマスターできるオンラインブートキャンプ Photoshop講座を開催しています。

現役デザイナーに毎日チャットで質問することができます。

記事を検索

関連するキーワード

関連する記事

初心者でもすぐにできる！Photoshopで円を描く方法

初心者の方でもPhotoshopの使い方がわかる記事です。 今回のテーマは「円を描く方法」です。 Photoshopの線で丸を書くこともできますが、...
Photoshop

Photoshopで360度パノラマ写真を作成する方法【初心者向け】

Photoshopでは、撮影が難しいパノラマ写真を編集によって簡単に作成することができます。 使うのは、「Photomerge」という自動合成機能。簡単な...
Photoshop

今さら聞けない！Photoshopで文字を加工する方法【初心者向け】現役Webデザイナーが解説

初心者の方でもAdobe Photoshopの使い方がわかる記事です。 今回のテーマは「文字を加工する方法」です。 この記事を見ながらぜひ使ってみて...
Photoshop

Photoshopの代用になる！無料で使える画像編集ツール・ソフト10選

Photoshopの代用になる無料で使えるツール・ソフトをまとめて紹介しています。 Photoshopは少し高額なソフトウェアでこれから試しに使ってみよう...
Photoshop

Photoshop CCのインストール方法

Photoshopの最新版として、Photoshop CC（Creative Cloud）があります。 今回は、Photoshop CCをインストールする...
Photoshop

Photoshopのパペットワープについて現役エンジニアが解説【初心者向け】

Photoshopのパペットワープについて、TechAcademyのメンター（現役エンジニア）が初心者向けに解説します。 なお本記事は、TechAcade...
Photoshop

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

Photoshopでガイドを表示させる方法【初心者向け】

Photoshopで画像の中の好きな場所に、ガイド線を表示させる方法を紹介します。 ガイドは実際の画像には反映されない目印用の線で、文字やオブジェクトをきれいに配置したいときに役に立ちます。 (※今回の作業はすべてAdobe Photoshop CCのバージョンで行っています。) 目次ガイドとは基本的なガイドの表示方法数値指定してガイドを表示する方法まとめ監修してくれたメンター   大石ゆかり 田島メンター！！ 絵や文字を配置するときに、きれいに横に並べるための目印が欲しいんですが…… 田島悠介 そんなときは「ガイド」の機能を使ってみよう。 大石ゆかり 「表示」メニューに「ガイド」というのはあるんですが、なぜか選択できないんです。 田島悠介 「ガイド」を使うには、まずガイドそのものを新規作成する必要があるんだ。 具体的な手順を見てみよう。   Photoshopでガイドを表示させる 今回は例として以下の画像を使用します。   「表示」→「新規ガイド」を選択します。   新規ガイドのウィンドウが表示されます。 「水平方向」を選択すると横の線が追加され、「垂直方向」を選択すると縦の線が追加されます。 「位置」はガイドを作成する場所の設定です。 水平方向の位置は画像の一番上、垂直方向の位置は画像の一番左から、いくつ移動した場所に追加するかを指定できます。   今回は下の画像のように「水平方向」「0 px」と設定します。   設定を完了して「OK」をクリックすると、画像にガイドが追加されました。   ガイドは左メニューの「移動ツール」で動かすことができます。   移動ツールをガイドに合わせると、ポインタが下画像のように変化します。   この状態でドラッグすると移動が可能です。   ガイドは新規作成することによって、複数表示させることができます。   また、Altを押しながらガイドをクリックすることで、水平と垂直を切り替えることが可能です。   田島悠介 ガイドはいくつでも表示できるので、必要なところに追加していくといいよ。 大石ゆかり あ、そうそう！ こんな感じにしたかったんです！ 田島悠介 もちろんこのガイド線は画像本体には描写されておらず、プリントアウトや画像出力をしても何の影響もないからね。 細かい操作も見てみよう。   作成したガイドは「表示」→「表示・非表示」→「ガイド」から表示の有無を変更できます。   「表示」→「ガイドをロック」を選択すると、ガイドが固定され移動の操作が無効になります。 ロックすることで、誤って動かしてしまうことを防ぐことができます。 ガイドの位置を決めたら、ロックしてしまった方が作業はしやすいでしょう。 ロックしたガイドは、「ガイドをロック」のチェックを外すことによって再び移動が可能になります。   ガイドを消去するときは、消したいガイドを画面の外へドラッグすればOKです。   すべてのガイドを消したいときは、「表示」→「ガイドを消去」を使用します。 ガイドの一部、または全体を誤って消してしまった場合はPhotoshopのショートカットキー「Ctrl＋z」を押すことによって元に戻すことができます。   ガイドの色や実線・破線などの設定を変更できます。 「編集」→「環境設定」→「ガイド・グリッド・スライス」から下画像の赤枠内を設定することで変更できます。 自分の作業環境に合った設定にしてみてください。 今回の記事は以上です。   田島悠介 画像によってはデフォルトのガイドの色だと見にくい場合もあるから、色の変更は結構大事だね。 大石ゆかり ガイドの表示と非表示を、パッとすぐに切り替えたりとかはできますか〜？ 田島悠介 そんなときはショートカットキーを使うといいよ。 デフォルトでは「Ctrl＋:」(Macでは「command＋:」)になっているけれど、任意のキーを割り当てることもできるからね。 大石ゆかり 便利な機能なんですね！どんどん使っていきたいです。 ありがとうございました！   Photoshopを学習中の方へ これで解説は終了です、お疲れさまでした。 Photoshopを調べたけど分かりづらい 副業や転職後の「現場で使える」知識やスキルを身につけたい Photoshopの学習や情報収集をしていて、このように思ったことはありませんか？ テックアカデミーのPhotoshop講座では、第一線で活躍する「プロのWebデザイナー」が教えているので、効率的に実践的なスキルを完全オンラインでしっかり習得できます。 合格率10%の選考を通過した、選ばれたWebデザイナーのチャットサポートを受けながら、初心者でもフォトレタッチをマスターできます。
Photoshop

あの有名サービスも使ってる！Webデザインのスタイルガイドの作り方

本稿は、designmodoのブログ記事を了解を得て日本語翻訳し掲載した記事になります。 本記事は、起業家であるTomas Laurinavicius氏によって投稿されました。   Webサイトの制作工程は、昨今ますます複雑になっており、すべて一人で作成するということはなくなっています。 そんな中、ビジネス上の目標を達成し、ユーザーにとって面白みのあるサイトを作るためには、サイト設計が一貫していることを意識するというのが重要なポイントとなります。 1つのWebサイトを作り上げる際、開発担当者から与えられたサイト設計を生かしながら、別々の担当者が、各々が担当する部分をデザインする場合、一貫性を保つ1つの方法として、設計ドキュメントまたはWebデザインスタイルガイドを作成する、という方法があります。   Webサイト内の異なるページの間に一貫性を持たせるためには、スタイルガイドを用意することが有効です。また、そのWebサイトに続き行われる開発やサードパーティ製作においても、ブランドガイドラインに沿うことができるようになり、Webサイトがブランド全体の一部として認識されることも可能になります。 ルーク・クラム氏は昨年、Webデザインの第一歩としてスタイルガイドを使用することは重要であるという結論にたどり着きました。今回は、Webデザインスタイルガイドを作成する方法について、詳しく見ていきましょう。あなたのプロジェクトにきっと役立つはずです。   Webデザインのスタイルガイドとは スタイルガイドは、あらかじめデザインされた要素やグラフィック、ルールなどを、デザイナーや開発者が集約したもので、Webサイトの様々な部分に対しての基準となり、最終的に一貫性のあるWebサイトを作り出すための指針となるものです。   スタイルガイドはなぜ重要？ 多くのデザイナーで大きなWebサイトやWebアプリを制作する際に大切なことは、それぞれが、制作しているWebサイトについてあまり深く解釈せずに作業をしたり、逆に個人の好みでスタイルを変更するなどの調整をしてしまわないようにすることです。 開発時にWebサイトの要素を定義しておくことで、制作者が開発者の用意した要素を再現することが容易になります。さらに、どの要素をコーディングしなければならないかを知ることができますし、最初からの見せ方を正確に把握できるため、作業が簡単になります。 製作者の作業をより楽にするために、デザイナーはホバーやクリック、訪問、その他のボタン、タイトル、リンクなど、相互作用を含めたすべてについて、あらかじめ整えておくことが必要になります。   [PR] Webデザインで副業する学習方法を動画で公開中スタイルガイドを作成する 1. ブランドを理解する まずは、ブランドを理解する必要があります。ブランドの背後にある物語を知り、作り上げているチームについて、会社のビジョン、使命、価値観など。あなたが作り出すスタイルガイドが、視覚的に、感情的に、そのブランドを表現できるよう、対象となるブランドをより深く掘り下げることが重要です。 もし、コーディングができないデザイナーなのであれば、Photoshopを開き、ドキュメントのタイトルや内容、そしてそれらの意味を簡単に書いておきましょう。 もしコーディングができるのであれば、後に簡単に利用できるように、あらかじめコード化されたアセットを持つHTMLドキュメントを作成するのも良いいでしょう。   2. タイポグラフィを定義する オリバー・リシェンステイン氏によると、タイポグラフィはWebデザインの95％を占める重要な要素です。 タイポグラフィは、訪問者とWebサイトそのものをつなぐ、最も重要なコミュニケーションツールの1つとなるため、最適なものである必要があります。 見出しの種類は「h1、h2、h3、h4、h5、h6」です。 まずは何に該当するのかの階層を決め、書かれた文章がどの階層に属するのかを正しく見出します。その後、ボディコピーや太字、イタリックのバリエーションに着目します。 小さなリンク、イントロテキストなどに使用されるカスタムコピー、フォントファミリ、重量、色またについても考え、指定しましょう。   3. 配色 人間がどのように色を知覚し、近くした色合いを既にしっているブランドに関連付けているかという事実は、想像をはるかに超えます。コカ・コーラを思い浮かべる時、あなたは赤いものを見ているのではないでしょうか？ まずは、Webサイト全体の基調となる色をスタイルガイドに設定します。基調となる色は、3つ以上の濃淡、もしくは明暗をもつ色を含まなければなりません。 しかし、場合によっては、ユーザーインターフェイスをデザインするために二次的な色や三次的な色が必要になる場合もあります。また、プライマリブランドの色が目立つように、白、灰色、黒のニュートラルな色を含むこともあります。   4. コピー ここで私が指すコピーとは、なにかを伝えるための宣伝文句のようなものです。スタイルガイドを作り始める前に、あなたはおそらくそのブランドを勉強していますね。例えば、そのブランドは若々しくてトレンディなものであることがわかったとします。とくにコピーとなる文言についての指示がない場合は、それを定義しておく必要があります。 「エラー番号404が発生しました」という代わりに、「ああ、インターネットが切断されてしましいました。これは404という番号のエラーなんです。」と表現することもできます。 ただし、もしコピーが企業的であるよう定められていたなら、そのような表現はしないでしょう。これは、コピーがプロフェッショナルでありながらも、面白く、受け入れられるようなものでなければなりません。Webサイトが優れているかどうかは、細かい配慮に見え隠れするものです。   5. アイコンを用いる アイコンは、テキストや言葉よりも古くから、何千年も前から存在しています。アイコンを利用することで、何が起こっているのか、次に何が起こるのかをWebサイトの訪問者に感覚的に伝えることが可能になります。 右のアイコンを選択すると、カラーパレット、コピー、またはグラフィックスよりもコンテントに多くのコンテキストが与えられます。アイコンを使用する場合は、対象となる利用者や、宗教や歴史など配慮しましょう。 そしてもう一つ。これは言うまでもないことですが、ブランドとその価値を考えましょう。極端な例で言えば、大銀行のWebサイトで手書きのアイコンを使用するのは避ける、ということです。   6. イメージの利用 絵は千の言葉よりも多くを語ります。Webサイトには、必ずそのスタイルや方向を定義するような画像を含めましょう。その際、今一度、ブランド価値とその使命について考えるようにして見ましょう。 例えば、水に関する慈善団体のWebサイトであれば「私たちは幸運にも水や食糧、電気、教育などの生きていくのに必要なものをもっているのだ」という、人間の感情への呼びかけるような、強い感情や良い根拠、呼びかけなどの魅力的なイメージを使用したりします。   7. フォーム フォームはユーザーがデータを入力することで作業するものに代表され、WebサイトやWebアプリケーションを相互作用させます。 このことによって、アクティブ、ホバー、エラー、警告、また、パスワードが脆弱である、メールが有効でない、あるいは単純な成功メッセージ（例”メールは送信されました”）のようなものを含む、フォームからのフィードバックを得ることができます。   8. ボタン ボタンは、配色や、フォーム、およびコピーの要素を含みます。以前に作成したこれらのものを利用して、異なるデザインながらも一貫性のある、機能的なボタンを作成することができます。   9. 空間を上手につかう Webサイトを制作する上で、スペーシングに注目することは非常に重要ですが、どのようにスタイルガイドに載せることができるでしょうか。スペーシングは、レイアウトに使用されるグリッドの形式で定義することができます。見出し、ボタン、画像、フォーム、および他の要素の間に、定義された空間を持たせることが可能になるのです。 スペーシングを決めることで、各要素に余裕のある空間与えることができます。一貫性のある使用をするこで、より構造的で専門的なWebサイトに見せるこができるため重要です。   10. 注意事項 大事なことを言い忘れていました。注意事項に関しては、よくつまづく問題については、本来の挙動の例と合わせて、FAQ形式で示すと良いでしょう。   11. 事例 オリジナルのスタイルガイドを作成する際に、インスピレーションとして活用してほしいスタイルガイドの良い例をいくつか紹介します。紹介するガイドは、各組織のビジョンや使命、価値観の影響を強く受けていることを念頭においてください。 皆さんが参考するにあたり、直接利用ができないものや、不適合なものもありますので注意しましょう。 Spotify – パートナーブランドガイドライン (PDF) Dropbox – ブランディングとロゴ Kickstarter – スタイルガイド Lonely Planet – デザインガイド ガイドラインを見つける方法 – ブランド価値への近道   終わりに スタイルガイドを制作するためには、まず、対象となるブランドを勉強しなければなりません。 そして、デザインに関して想定されうる様々な要素を含めることを意識し、一貫性のあるスタイルガイドを作成しましょう。   また、TechAcademyでは初心者でも最短4週間でオリジナルWebサイトを公開できるWebデザインオンラインブートキャンプを開催しています。 デザインのスキルを磨きたい、自分のアイデアを形にしたいと思っている人はぜひご覧ください。
Webデザイン

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

パワーポイント(PowerPoint)を使ってスライドショーを行う際に使えるショートカットキーについてご存知ですか？ 時間をかけて作ったスライドを効果的に使って、スマートなプレゼンテーションにしたいものですよね。 今回は、スライドショー実行中に使えるショートカットキーを厳選して紹介します。   なお本記事は、KiRAMEXのオンライン完結のPowerPoint(パワーポイント)講座の内容をもとに紹介しています。   目次 先頭のスライドから開始 スライドショーの終了 現在のスライドから開始 次のスライドを表示 前のスライドを表示 指定したスライドを表示 最初のスライドを表示 スライドにペンで書き込みをする スライドに蛍光ペンで書き込みをする スライドにある書き込みを消す スライドにある書き込みを全て消す ポインタを矢印にする レーザーポインタを表示する 画面を黒にする 画面を白にする メディアを再生・一時停止する メディアの再生を停止する 音量を上げる 音量を下げる ショートカットキー一覧を見る（ダイアログボックスを表示） プレゼンに使えるパワーポイントショートカットキーまとめ   先頭のスライドから開始 「F5」 まずは基本中の基本、スライドショーをスタートさせるショートカットキーです。 マウス操作をしなくても、「F5」を押すことで、スライドショーが開始されます。   [PR] Webデザインで副業する学習方法を動画で公開中スライドショーの終了 「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

デザインを実装する上で知っておきたい！9つの原理とは

本稿は、Smashing magazineのブログ記事を了解を得て日本語翻訳し掲載した記事になります。 本記事は、UXディレクターでありデザイン本の執筆もしているTom Greever氏によって投稿されました。   先日、クライアントに向けたHTMLとCSSを使用してデザインを実装するための方法についての講習会で指導を行っていました。 そこでは、スタイルガイド駆動開発やOOCSS・SMACSSのような取り組み方、及びモジュール設計などの工程についての議論も行われました。最終日近く、ある人に「でも、どうやってそれが正しく行われていると判断したらいいんでしょうか？」という質問を受けました。 最初、私は混乱していました。それまで私は「正しく行う」ことだけを説明していましたが、その質問が何が主格の選択肢であるかを評価するためのより深いニーズに根ざしているのに気付きました。 例えば「他と共同して動作するクラスの数は最小限にする」というような特定のアドバイスは、モジュール性に関する幅広い認識がなければ役に立たないのです。 私たちの仕事がきちんとできているかを本当に知るために、デザイン実装の目安として使えるより高いレベルの原則が必要であると気付きました。 この溝を埋めるため、デザイン実装に関する9つの原則をまとめています。 CSSやコードを吟味するときの他にチームに志願している人への面接を行うときでも、これらの原理は特定の技術やデザインを実装する一般的な手段を超越した骨組みとして利用することができます。   1.構造化 文書はスタイルシート適用の有無に関わらず、意味があり論理的に書かれている。 2.効率的 デザイン実装に使われているマークアップとアセットは最小限である。 3.標準化 共通の規定があり、自由に使うことができる。 4.抽象化 ベースとなる要素は特定のコンテキストから切り離され、中心となるフレームワークを形成している。 5.モジュール化 共通して使える要素は、再利用ができるように分割されている。 6.設定が可能 ベースとなる要素を、任意のパラメータでカスタマイズできる。 7.拡張が可能 コードは簡単に拡張することができ、今後も追加されることが見込まれている。 8.文書化されている すべての要素は、それを使用して拡張できるように他の人に説明されている。 9.正確である 最終的なアウトプットは、予定された通りのデザインとして適切な表現がされている。   プロジェクトに各原則がどのように適用するかを確認するため、この記事の基準として私のプロジェクトのひとつのモックアップを使用します。 これは既存のECサイト中の、デイリーディールを宣伝する特別なランディングページです。スタイルの一部は既存のサイトから継承されますが、ほとんどの要素は新しいものであるということに注意してください。上記の原則を使って、この静止画像からHTMLとCSSを生成してみましょう。 この製品の「カード」レイアウトは、新しい要素です。   1.構造化 文書はスタイルシート適用の有無に関わらず、意味があり論理的に書かれている。 ここでの原則は、ドキュメント(HTML)の内容がスタイル(CSS)がなくても意味を持つということです。正しい見出しレベル(heading)や順序なしリスト(ul)などを設定し、<header>や<article>といった意味のあるタグを利用するということでもあります。 aria-labelやalt属性、その他のアクセシビリティに必要な可能性があるものをきちんと使用しましょう。 見た目的に変わらないアンカータグとボタンのどちらを使うかということは、大したことには思えないかもしれません。ですが視覚的に同じであっても、これらは違う意味を伝え違う動作を行います。セマンティックマークアップはその意味を検索エンジンや補助技術に伝え、他デバイスにおいての再利用もやりやすくします。それはプロジェクトの将来性に繋がります。   よく構造化された文書を作成するということは、セマンティックHTMLを書くことを学び、W3Cによる標準や他の専門家のベストプラクティスを習慣づけ、自分のコードが分かりやすくなるように時間をかけることです。 スタイルシートなしでブラウザで確認するのが、一番シンプルなHTMLのテスト方法になります。 そのHTMLはCSSがなくても使うことができるか 階層構造が一目で分かるかどうか HTML自体で意味を伝えることができるか しっかりした構造をもつ文書を作成するにはHTMLから始めるのがよいでしょう。ビジュアル的なスタイルを考える前に、構造とそれぞれの意味のためにプレーンなHTMLを書きます。divは避け、妥当なタグを考えます。この基本的なステップが、適切な構造を作るために役立つでしょう。 <section> <header> <h2>Daily Deals</h2> <strong>Sort</strong> <span class="caret"></span> <ul> <li><a href="#">by ending time</a></li> <li><a href="#">by price</a></li> <li><a href="#">by popularity</a></li> </ul> <hr />
Webデザイン

【デザイン事例を紹介！】グリッドデザインのWebサイトが良い15の理由

本稿は、Design School Canvaのブログ記事を、Design School Canvaより了解を得て日本語翻訳し掲載した記事になります。また本記事は、Mary Stribley氏によって投稿されたものです。 グラフィックデザイナーにとって、グリッドは特に重要なデザインツールであるとされています。   ほんの数本のグリッドの存在がデザインに加わることが、デザインプロジェクト全体にとって、極めて重要なのはなぜでしょうか？ デザイナーは一人一人異なる答えを持っているかもしれませんが、要するに、グリッドは、それなしでは時間もかかり、面倒で困難なデザインを構築するのに役立ってくれるのです。 もしあなたがグリッドデザインの世界を探求しようか迷っているとしたら、グリッドをレパートリーに加えるだけで、デザインが非常に良くなる15の理由をお話します。   01. コンテンツが整理される グリッドの主な利用価値の1つは、デザインの要素を整列化、順序化したり、Webページをクリーンできちんとしたデザインにするのに役立つことです。これはグリッドの整列機能の効果であり、グリッドの役割の大部分を占めていると言えます。 グリッドシステムを確立することで、要素を整列化するのに使える基本構造を自分自身で創ることが可能となるのです。そして、これによりクリーンで整理されたレイアウトを実現できます。 例として、Christine Wisnieski によるTwist CreativeのGridデザインのレイアウトを見てみましょう。各要素がきれいに整列されて、全体としてクリーンな仕上がりになっています。 グリッドを使うときには、各要素をきれいに整列できるようなタイプのものを見つけましょう。要素とは具体的には、文章、画像、グラフィックなどで、その他どのような対象も要素となりえます。 最終的な完成イメージという大まかな全体像から始めて、それに合うグリッドを組み立てましょう。   02. あなたの仕事を高速化する 常に高速化と効率化を追い求める世界で生きる私たちにとって、「効率改善」などは耳に聞き慣れた言葉ですから、このメリットの説明は、すんなりと受け入れてもらえるかもしれません。 グリッドは、あなたのデザインにかける時間を、よりスピードアップして充実したものにしてくれるでしょう。というのも、どのポジションに要素を配置するのが最高の選択なのかを示すガイドとしても、機能してくれるからです。 要素が良く見えそうなポジションを手さぐりで探してから、ランダムに配置するという作業をしなくても、グリッドがあれば、あなたを自然な解へと導いてくれるでしょう。   グラフィックデザイナーのTroy Templeman氏が述べるように、「Gridデザインは、どの場所にコンテンツを配置できるかというよりむしろ、どの場所にコンテンツを配置すべきかという、デザイナー自身の決定をサポートすることで、デザインのプロセスをスピードアップしてくれる。」というわけです。 グリッドは家の建築の土台のようなものとして考えることができます。一番最初に建造しておくべきものの1つであり、そこからさらに構築を進めます。   [PR] Webデザインで副業する学習方法を動画で公開中03. 文章の居心地が良くなるようなレイアウトを実現できる 少なくとも、グリッドと文字は、2つのデザイン要素として相性のいいの組合せです。強力なグリッドは、文章量の多いレイアウトを、よりすっきりとして組織化された印象に整えてくれます。ボディコピーの文章も読みやすくしてくれるでしょう。 文章を読みやすくするのに役立つグリッドの手法の1つに、「ベースライングリッド」があります。これはノートの罫線のようなもので、文章の1行1行がベースラインとなるグリッドの上に乗ります。これらのグリッドは、文章で作られた各要素が、同じ高さに並ぶように整えてくれます。 もしあなたが文章の行を整列していなくても、多くの人はその特定のアンバランスな箇所には気づかないかもしれませんが、あなたのデザインが全体として散らかっているということは無意識的に気づくものです。つまり、小さな変化が大きな効果をもたらしてくれるのです。 これは、「ベースライングリッド」の実例です。各行がそれぞれ整列されていて、クリーンですっきりとしたタイポグラフィーの効果を生み出しています。   04.　他のデザイナーとの共同作業をもっと容易にしてくれる あなたも今までに他のデザイナーと共同で仕事をしたことがあるでしょうか？ そのような場面では、グリッドは、ストレスとコミュニケーションの齟齬をいくらか和らげてくれるかもしれません。 すでにお話したように、グリッドはデザインに基本構造を作るのに役立ち、個々の要素がどの場所に置かれるべきかについての方針も示してくれます。もし、あなたが最初にグリッドからデザインを組み立てていれば、新しいデザイナーが途中から加わったときにも、あなたのデザイン手法や、要素の配置の意図を理解してもらえるでしょう。   例として、あなたが下にあるようなデザインに取り組んでいて、これから第3パラグラフを作成するときに、他のデザイナーに参加してもらうよう依頼するケースを考えてください。 グリッドシステムを使っていれば、配置や整列を正確に実践できます。加えて、「カラムの幅はどのくらいにしますか？」「1つ前のカラムからどのくらいの距離を空けて配置しますか？」などのメッセージが行ったり来たりすることも少なくなるでしょう。というのも、グリッドによって全ての答えはすでに用意されているからです。   他のデザイナーと共同で仕事をする時には、わかりやすくて、最終的な完成品に合うグリッドシステムを構築しましょう。必要なカラムの数が3つであるなら、13も使う必要はありません。グリッドシステムを組み立てていないうちから、要素の整列を行うのは避けましょう。グリッドを機能的で役立つものにしておくのが大切です。   05. バランスの整ったデザインを創りやすい グリッドの美しさはその統一感にあります。あなたのデザインを複数のカラムに分割しようとするときには、シンメトリーなレイアウトから始めることになるでしょう。左右のどちら側のデザインがもう一方の側からずれているか判断することも、容易になるでしょう。   例として、以下のMaan Ali氏によるWebサイトのデザインを見てみましょう。左右対称なグリッド、大きさの均一化されたブロックと文章を使うことで、均整のとれたデザインになっています。 他の例として、Braulio Amado氏によるデザインでは、中央のグラフィックを加えて3つのカラムとして表現することで、シンメトリーで完璧なバランスになっています。 かなり強いデザインであるために、圧迫感のある印象を人に与えやすいにもかかわらず、きちんと整列して完璧なバランスを実現することで、クールで落ち着いたデザインになっているのです。   06. マルチページのレイアウトに統一感を与える グリッドは複数ページのレイアウトにも役立つでしょう。レイアウトにグリッドを使うことで、あるページから別のページへ、あるレイアウトから別のレイアウトへ、グリッドを継承することが可能です。容易にレイアウト全体の一貫性を保つことができます。 例として、WebサイトのRolling Stoneを考えてみましょう。数多くのページから構成されていますが、各ページの構造やコンテンツはそれぞれ異なっています。全体のページで一貫したレイアウトを保ちながら、各ページごとに最高の方法でデザインするには、どうしたら良いと思いますか？   以下の画像では、WebサイトのRolling Stoneの音楽のページとトップページを比較しています。4つのカラムで構成されるグリッドデザインを使うことで、一貫性があり、クリーンで、親しみが持てるような外観になっています。一方で、各ページにある空白のスペースも、ページがしっかり機能することに役立っています。 グリッドがマルチページのレイアウトに役立つ具体例としては、スタイルガイドのようなマニュアルが一般的です。これらは教育目的で使われ、線形のデザインで整えるのが望ましいため、グリッドが活用されるのです。例として、以下のMike CollingeによるBosphorusのスタイルガイドでは、グリッドが統一して使われています。 複数のページをデザインするプロジェクトに取り組んでいるとしたら、「素晴らしいマルチページのレイアウトを設計するためのチェックリスト」に目を通しておきましょう。   07. 階層化したデザインを表現できる Gridデザインの共通の前提は、グリッドを使うことで各要素を均一なサイズのブロックに分けることですが、こうすることで自動的にデザインをコントロールできます。 階層化はデザインにとって大切なことであり、グリッドはこの階層化をスピードアップして容易にしてくれます。あなたが階層化の大切さにまだ気づいていないとしても、全てのデザインは少なくとも3段の階層を持つべきである理由のリストによって、その認識は変わるでしょう。   例として、NASAのホームページのデザインを見てみましょう。 4つのカラムのグリッドで構成されるデザインで、より重要度の高い画像を、複数のカラムや列の領域まで引き伸ばして大きくすることで、階層を表現しています。 「ハロウィーンの空を飛ぶ活動を終えた彗星」の左上の画像は、2カラム×2列分のサイズに広げられ、ページの中で最も注目を引くようにデザインされています。他の重要な話にも、画像が複数のカラムに引き伸ばされたものがあります。 印刷物にもグリッドをデザインの基本として使うことができます。複数のカラムのサイズに拡大することで、ある要素に注目を集めたり、逆に小さなカラムのサイズにして、ある要素を目立たないようにすることができます。   次の例は、David Tang氏によるデザインで、数字の23や30に注目を集めるように、グリッドの大きさや配置が工夫されています。   08. 散らかったレイアウトと、さよならできる グリッドは、恐怖の散らかったデザインを一掃してくれる素晴らしいツールです。そのためには、マージンを使いましょう。 マージンとは、デザインのまわりの余白のことです。一般的に、マージンが狭いほど、あなたのデザインは詰まって 散らかって見えてしまいます。マージンをより広くすることで、整ったクリーンなデザインに見せることができます。   以下の例では、マージンがグレーの色でマークされています。 グリッドとマージンはしばしば一緒に使われますが、この組合せには、デザインをより開かれたクリーンな印象にする効果があります。 散らかったデザインを回避するもう1つの方法は、ガターを使う方法です。ガターとは、グリッドのカラム間にある余白のことです。ガターのサイズは調整できますが、機能するグリッドを作るためには、全体のガターサイズは統一しましょう。 マージンとガターを組み合わせることで、効果的な結果を生み出している例を見てみましょう。このAisle One によってデザインされた壁紙は、マージンとガターが目立つようなデザインであるため、それぞれいかに効果的に使われているかに気づかせてくれます。   09. 心地よいデザインの世界が開ける 芸術家や写真家など数多くのデザイナーが、グリッドを作品のベースに使っている理由は、数学的な美しさを持つデザインを生み出すと考えられているからです。 グリッドによって心地よいデザインを生み出す方法の1つに、「三分割法」があります。 最も基本的かつ簡単な方法の1つです。写真の技術としてもよく使われる方法ですが、理論の根本は、各2本の水平線と垂直線によって、全体のデザインを9つの均一な区画分けることにあります。線の交点(以下の例ではブルーの円)にデザイン要素を置くことで、心地よいデザインを生み出します。 この理論が写真に使われるとき、写真家は、レンズの焦点がこれらの交点に集まるようなフレームを慎重に選びます。 試しに「三分割法」をあなたのテキストデザインに取り入れて、目に心地よくなるかどうか確認してみましょう。ページを水平方向と垂直方向に均等な3×3の区画に分けて、これらのシンプルなガイドを応用するだけです。   10.　グリッドのルールを破ってインパクト効果を狙う グリッドのレイアウトのルールを守ることで、クリーンで整った美しいデザインを生み出すことができますが、時にはグリッドのルールを破ることで、ユニークで人目を引くような効果を狙うことができます。   例として、99Uによるデザインでは、シンプルな3カラムグリッドが使われていますが、イエローの文字を対角方向に ページ全体に走らせることで、グリッドによるクリーンな直線性のルールを破っています。「Think differently(考え方の転換)」というメッセージを伝えるには、印象的で記憶に残りやすく、実に効果的なデザインです。 グリッドのルールを破ると、特定の要素に注目を集める効果もあります。例として、このBig CartelのWebサイトのデザインを見てみましょう。要素はグリッドに従って整列されていますが、いくつか例外的なデザイン要素があります。グリッドから飛び出ている要素が、強い垂直ラインのデザインを破ることで、人の視線を引く効果があります。   11. 柔軟性に富む グリッドがあなたのデザインに合うかどうか心配になりますか？全てのグリッドは柔軟性に富むので、デザインの変化にも対応できますから、心配する必要はありません。 あなたがグリッドを作るときには、好きなだけカラムの数を選ぶことができるのは、グリッドの柔軟性の１つです。   以下の例では、1カラムのデザインと、2または3カラムのデザインの比較を示しています。 もちろん一般的には、デザイナーやデザインの必要性に応じて、最大13カラムの範囲でグリッドが構成されます。以下の例では、フルページサイズの画像と文字、そしてシンプルなレイアウトタイプを活かしたデザインで、1カラムのグリッドシステムとして完璧です。 次のDesign Surgeryによるレイアウトのデザインは、13カラムで構成されています。所々に入っている画像と相まって、長くなりがちな記事の文章を効果的に魅せています。 最終的にカラムの数はあなた次第です。ただ、カラムの数が多いほどデザインの柔軟性が高まり、数が少ないほどシンプルで柔軟性が低くなることも、デザインする時には心に留めておきましょう。   12. 対角線のデザインに役立つ 文字通り、異なる角度からのデザインのアプローチにも、グリッドは役に立ちます。グリッドは水平または垂直に並べるだけではなく、対角線の軸上に配置しても、効果的です。 Andrew Ackroyd氏によってデザインされたポスターは、フォントと画像が対角線のグリッド上に並べられ、モダンでスタイリッシュな効果を生み出しています。 対角線のグリッドは、画像の多いレイアウトにも役立ちます。Karen Hoffstetter氏によるこのデザインでは、対角線を活かしたフレームを使った画像で、全体が埋め尽くされたデザインです。 またこのデザインでは、対角線のグリッドに加えて、水平方向と垂直方向グリッドも使われていることが、要素の美しい整列を可能にしています。   13. 万能に使える グリッドが最も利用されているのは、雑誌や編集のレイアウトなどですが、その他のどんな用途にも、デザインツールとして活用できます。 多くの有名なロゴは、グリッドシステムに基づいて作成されています。例えば、Braunの有名なロゴは、グリッドを使用して、文字をクリーンで強さのあるデザインに統一するプロセスから、誕生したのです。 グリッドはまた、イラストレーション全般にも使うことができます。Dean Gorissen氏による、都市のイラストレーションでは、クリーンでシャープな角度が使われていますが、これが対角線のグリッドの形が利用されたことを示しています。 どのような用途であれ、グリッドは、計り知れないほど便利なツールとなってくれるでしょう。全てのデザインスタイルやデザイナーにとって有益なツールではないかもしれませんが、多くのケースにおいては役に立ちます。あなたの次のプロジェクトでも、グリッドの活用を考えてみてください。   14. 余白のデザインに役立つ あなたは余白を活かしたデザインの世界を深く掘り下げてみたいと思っていますか？グリッドは余白のデザインにも役立ちます。 デザインを複数のカラムに分けて、要素を並べた後、残ったいくつかの列やカラムは空けたままにして余白を作りましょう。 João Oliveira氏によるこのレイアウトでは、グリッドのいくつかの領域を空けておくことで、余白を広く作っています。その結果として、スタイリッシュかつ洗練されたデザイン、機能的でミニマルなレイアウトが実現されていて、散らかりや不要な要素は全くありません。 同様に、Mehmet Gozetlik氏によるポスターのデザインでも、グリッドの機能が活かされています。フォントと画像が中央のカラムに整列され、外側のカラムは余白にされています。美しくバランスが取られていて、要素が中央に集められた、視覚効果も高いポスターデザインです。   15. 読者の目に優しいデザイン 活字印刷のレイアウトを読みやすくすることで、グリッドは、文章のデザインにも役立ちます。 人間の目は、文章のまとまりの長さにとても敏感です。文章のまとまりが長すぎると、最後まで読み進めるのも辛くなりますが、短すぎても細切れな印象になり、しっかりと読み込むのが難しくなります。 一般的に、行の黄金比は、1行あたり、単語数で6以上、合計文字数で空白も含めて約50～65文字になるとされています。 文字の多いレイアウトにグリッドを使うことで、簡単に素早く均一なカラムを作ることができます。カラムを使うことで、文章の長さを強力にコントロールできます。 これこそ、新聞でグリッドを基本としたレイアウトがよく使われている理由です。読みやすいコンテンツを作るのに役立っているのです。 編集に関することをもっと学びたいと思いますか？「世界の編集デザインベスト50」のリストが紹介されているWebページを訪問して、目を通しておきましょう。   次はあなたの番です：グリッドデザインを早速実践しましょう あなたがグリッドのファンであるなしに関わらず、非常に多くのデザインで役に立つことは明らかです。グリッドの起源は13世紀に遡るというのも、驚くにはあたらないことかもしれません。 グリッドには、デザインのバランスを整えて整列することから、対角線のデザインでタイポグラフィーをクールに見せることに至るまで、数多くの活用方法があります。 グリッドは、デザインのページ上のただの線ではありません。デザインを構造化し、デザインの方向性を示し、デザインを形作ることで、あなたの望む完成イメージを実現する力があるのです。 [お知らせ]TechAcademyでは初心者でも最短4週間でオリジナルWebサイトを公開できるWebデザインオンラインブートキャンプを開催しています。
Webデザイン

Photoshopでスライス機能を使う方法【初心者向け】

Webサイト用の画像を作成する「スライス機能」の使い方を初心者向けに解説した記事です。 スライス機能は1つの画像を分割して複数の画像に書き出したい時に便利です。 やり方を覚えればすぐに実践できるので、自分で試してみてください。 (※今回の作業はすべてAdobe Photoshop CCのバージョンで行っています) 目次ガイドとは基本的なガイドの表示方法数値指定してガイドを表示する方法まとめ監修してくれたメンター   田島悠介 今回はスライス機能による画像の処理を行ってみるよ。 大石ゆかり 田島メンター！！スライス機能というのは何ですか～？ 田島悠介 スライスを使うことで、1つの画像を複数の画像に一度に分割して保存できるんだ。 Webデザインでも使われる機能なので、覚えておくと便利だよ。実際にやってみよう。 大石ゆかり はい！   スライス機能とは スライス機能とは、1つの画像を複数に分割できる機能です。 スライス機能は切り抜きツールを発展させたもので、並べられた画像などを一度に切り抜くのに便利です。 この機能を使えば、Web ページに表示する画像を複数に分割し、1枚の画像のように表示できます。 今回は以下の画像をもとに、スライス機能を使って画像を書き出す方法を紹介します。   領域を指定する まずは1つのつながった画像の中から、画像として書き出したい領域を指定します。 今回、指定方法として以下の2つを紹介します。 どちらを使っても大丈夫です。 個々に領域を指定する方法 ガイドに合わせて領域を指定する方法   個々に領域を指定する方法 まずは対象の画像を開きます。 次に、Photoshop画面の左側のツールバーにある切り抜きツールのアイコンを長押ししてください。 そうするとサブメニューが表示されるので、この中の「スライスツール」を選択します。   スライスツールが選ばれた状態で、画像として書き出したい領域の左上から右下にかけてドラッグし、四角形の画像領域を指定します。   すると、指定した領域の左上に「02✉」と表示され、その他の部分も自動で領域が作成され「01✉」「03✉」「04✉」といった具合に番号が付けられます。   同じようにして順次画像を指定していけば、すべての領域を指定できます。 また、自動の領域指定をうまく利用すれば領域を指定する回数を少なくできます。   ガイドに合わせて領域を指定する方法 もう1つの方法の紹介です。 まずガイドを表示するために、表示メニューの定規を指定します。   次に横の分割線1本と縦の分割線2本を引きます。 線を引くには、一度マウスを上端または左端の目盛のところに持って行き、そこから境界線の方向にマウスをドラッグします。 こうして3本の境界線を引きます。   この状態で先ほどのスライスツールを選びます。 （すでに選ばれていれば再度選択する必要はありません。） すると、画面上部のオプションバーのところがスライスツール用になり、「ガイドに沿ってスライス」というボタンが表示されるので、そのボタンを押します。   この操作で、6枚の画像の領域が指定できました。   以上で領域の指定は完了です。   大石ゆかり うーん、なかなか操作が難しいですね…… 田島悠介 ガイドを使った方法もあるので、やりやすい方を使ってみよう。 大石ゆかり 分割ができたら、次は何をしたらいいんでしょうか？ 田島悠介 画像の情報を設定して、「Web用に保存」を使用するよ。次の手順を見てみよう。   [PR] Webデザインで副業する学習方法を動画で公開中画像情報を登録する 続いて、画像を利用しやすいように情報の登録を行います。 ただし、画像の分割だけする場合は、この工程は飛ばしても構いません。   画像の情報を登録するにはスライス選択ツールを使います。 Photoshop画面左側のツールバーの切り抜きツールのアイコンを長押しすると、サブメニューが表示されるので、その中の「スライス選択ツール」という項目を選択します。   先ほど分割した画像の領域をダブルクリックすると、それぞれの画像用に入力ウィンドウが表示されるので必要事項を入力します。 なお、すべての項目を埋める必要はありませんので、必要な項目だけ入力してください。 情報の登録は以上です。   Web用に画像を保存する 最後に画像を保存します。 メニュー「ファイル」の「書き出し」の中にある、「Web用に保存」をクリックします。 単純に「保存」や「別名で保存」を選択しても、スライスツールで分割した画像は保存されません。 なので必ず「Web用に保存」を選ぶ必要があります。   Web用に保存画面が開くと、画像形式や画質などの調整ができるようになっています。 ここで保存のボタンを押します。   保存するフォルダを指定すると、中にimagesというフォルダが生成され、そこに先ほど分割した画像が保存されます。   スライス機能の使い方は以上です。   田島悠介 ファイル名を見ると、最初に指定したものに準拠した連番の名前になっているのが分かるね。 大石ゆかり なるほど、管理しやすくていいですね。 田島悠介 スライスによる処理を行った画像を保存する場合は、いつものファイル保存ではなくてこの「Web用に保存」を使うということを忘れずに覚えておこう。 大石ゆかり 普段とは少し保存の手順が違うということですね。分かりました！   Photoshopを学習中の方へ これで解説は終了です、お疲れさまでした。 Photoshopを調べたけど分かりづらい 副業や転職後の「現場で使える」知識やスキルを身につけたい Photoshopの学習や情報収集をしていて、このように思ったことはありませんか？ テックアカデミーのPhotoshop講座では、第一線で活躍する「プロのWebデザイナー」が教えているので、効率的に実践的なスキルを完全オンラインでしっかり習得できます。 合格率10%の選考を通過した、選ばれたWebデザイナーのチャットサポートを受けながら、初心者でもフォトレタッチをマスターできます。
Photoshop

あなたの目的に合わせて学べるコース

副業したい方

Web制作の力を身につけ
副業までサポート

はじめての副業コース

転職したい方

未経験から16週間で
エンジニアに

エンジニア転職保証コース

スキルアップしたい方

AIも統計解析もできる
Pythonを学ぶ

Pythonコース

※ 経済産業省の第四次産業革命スキル習得認定講座で、厚生労働省指定の専門実践教育訓練給付制度の対象です。条件を満たすことで支払った受講料の最大70％（最大306,460円）が給付金として支給されます。詳しくは エンジニア転職保証コース のページ内の注意事項をご確認ください。

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

テックアカデミーGAIナレッジベース
TechAcademy（テックアカデミー） Webデザインコース Webデザイン Photoshop Photoshopでガイドを数値指定して表示する方法を現役エンジニアが解説【初心者向け】