Advertisement

ultimate-cheat-sheets-for-designer

 

チートシートとは、覚えておきたいことをまとめた「カンニングペーパー、カンペ」のようなものです。この記事では、デザインやWeb制作の作業効率が上がるチートシートをまとめてご紹介します。

 

デザインの現場に欠かせないPhotoshopやIllustratorといったAdobe製アプリはもちろん、HTMLの基本やCSS FlexboxやGridといった覚えておくのが大変なものから、配色やタイポグラフィーの基本など、「あれ、どうやるんだっけ?」そんなときに役立つチートシートを、日本語版中心にまとめています。

 

 

デザインやWeb制作の作業効率が上がる便利チートシートまとめ

 

Photoshopのショートカットキー早見表

Adobe謹製のフォトショップ用チートシート。数あるショートカットの中から、デザイナーによく使われているものをピックアップして一覧表にしているそう。PDFで保存し、印刷することもできます。

use-shortcut-keys-for-efficiency-photoshop_01

 

ps-shortcut-2016
フォトショップでの作業に時間がかかってしまう、というひとは多いでしょう。作業をはじめると、同じ作業を延々と繰り返していることがあります。そんなときは便利なショートカ
tropical-icecream-1
「フォトショップでの作業に時間がかかってしまう。」 フォトショップの作業スピードをアップし、より効果的に編集できるもっとも良い方法のひとつとして、いく

 

 

Illustratorのショートカット早見表

こちらはIllustrator版のチートシート。印刷した表をデスクに貼ってショートカットマスターを目指しましょう。こちらもPDFファイルでダウンロード可能。

use-shortcut-keys-for-efficiency-illustrator_01

 

 

 

After Effects のキーボードショートカット

After Effects のキーボードショートカットを参照しやすいリストにまとめています。キーボードショートカットのPDFファイルを印刷しても便利です。

after-effects-keyboard-shortcuts-jp

 

 

 

The Complete Adobe After Effects CC Keyboard Shortcuts For Designers Guide

キーボードにツールアイコンが表示されているので、より直感的にショートカットキーを覚えることができます。After Effects用チートシート。

the-complete-adobe-after-effects-cc-keyboard-shortcuts-for-designers-guide-2015

 

 

 

Premiere Pro のキーボードショートカット

PremierePro のキーボードショートカットを参照しやすいリストにまとめています。キーボードレイアウトのグラフィックを使用してショートカットをカスタマイズしたり、1 つのコマンドに複数のショートカットを割り当てることもできます。

premiere-pro-adobe-shortcuts-matome-1

 

 

 

The Complete Adobe Premiere Pro CC Keyboard Shortcuts For Designers Guide

動画編集ソフトPremiere Proのキーボードショートカット一覧表。アニメーションは今後ますます需要が増えてくることが予想されます。

the-complete-adobe-premiere-pro-cc-keyboard-shortcuts-for-designers-guide-2015

 

 

 

Adobe InDesign CCツールパネルの概要

InDesignで使われる基本ツールの名称をまとめたビギナー向けチートシート。

er_00_1482154526449-1

 

 

 

Manual photography cheat sheet

英国ロンドンにある写真スクールがデザインした、カメラのマニュアル撮影のポイントをまとめたチートシート。シャッタースピードやISO、三分割法など写真にまつわる基本がまとめられています。

photography-cheat-sheet

 

20-compostion-guide-1
完璧な写真を撮影する方程式はありません。 しかし、これから紹介する20個のガイドラインを利用すれば、つまらない写真の構図を魅力的に改善することができる
exposure-triangle
絞り値(英: Aperture)およびシャッター速度、ISOを確実に理解することは、思い通りの写真を撮影する第一歩です。 この3つのカメラ機能は、画像の露
aesthetics_feat-800x533
海外サイトPetapixelで公開された「Understanding Basic Aesthetics in Photography」の著者Sebastian Ja

 

 

Interactive typography cheat sheet

文字の基本となる、タイポグラフィの専門用語を図解付きでインタラクティブに説明したオンラインチートシート。

interactive_typography_cheatsheet

 

15-mistakable-terms-top-2-1
デザインに関して話をするときに、専門的な用語を必要とするケースがしばしばあります。その中には、あまり意味が分からずに使っていることはないでしょうか。
typoglossary (1)
海外デザインブログCanva Design School Blogで公開された「A Beautifully Illustrated Glossary of Typo
design_dictionary
どんな業界においても、その業界の人だけが理解できる、専門的な用語は存在します。今回は、デザイナーがきちんと理解しておきたい、36個のデザインにまつわる用語をまとめた
coulee
これまでに書体の使い方が特に優れたプロジェクトを目にしたことはないでしょうか。デザイナーによっては、あらゆるプロジェクトで完璧な書体をデザインできる、特殊なスキルを

 

 

Color Combination Cheat Sheet

デザイナーが理解しておきたい色の基本原則をまとめたオンラインチートシート。色選びや色の組み合わせに困ったときに便利です。

the_only_color_combinations_cheat_sheet_you_ll_ever_need

 

hawaii-vacation-1
「デザイン」に対して興味のあるすべての人を対象に、いつまでも長く利用できるデザインの基礎テクニックを、これまで当サイトで紹介したエントリーの中から、各ポイントごとに
color-theory-top
海外デザインブログCanva Design School Blogで公開された「Color Theory Tips and Inspiration」より許可をもらい
10color-theory-top
デザイン制作でもっとも頭を悩ます作業のひとつ、「配色カラー決め」で覚えておきたい色の基本原則10個をまとめたインフォグラフィックス、「The 10 Commandm
ultimate-color-combination
デザイン制作のなかでも、正しい色の組み合わせを見つける作業は、もっとも重要な過程のひとつで、デザインのたびに頭を悩ますデザイナーも多いでしょう。 今回
color-tool2015-top
この記事は、2016年8月22日に公開してから再編集、アップデートを随時行っています。新しいツールを加え、サービスが終了しているツールは削除し、合計54個の配色ツールサ

 

 

HTML Cheat Sheet

HTMLで使用されるタグと実装サンプルコードをひとまとめにしたオンライン版チートシート。PDFファイルとしてダウンロードも可能となっています。

html_cheat_sheet__inc_html5_tags__-_digital_com>

 

 

 

CSS Flexbox Cheatsheet

CSS Flexboxの各プロパティごとに配置、レイアウトを直感的に確認できるチートシート。下部のGrid版と一緒にどうぞ。

flex__a_simple_visual_cheatsheet_for_flexbox

 

 

 

CSS Grid Cheatsheet

利用機会の増えているCSS Gridのややこしい各プロパティごとのレイアウトを図解したチートシート。

grid__a_simple_visual_cheatsheet_for_css_grid_layout

 

 

 

Sass Cheatsheet

SassのVariablesやMixinなどの詳しい使い方をまとめたチートシート。

sass_cheatsheet

 

 

 

日本語版 WordPress チートシート

Webクリエイターボックスさんが配布している日本語版 WordPress チートシート。よく利用するものを中心に、例文も一緒にまとめられているので、コピペできるのも便利。

wordpress_cheatsheet3

 

 

 

Human Interface Guideline: iOS Adaptivity and Layout

Appleが公開しているiOS向け公式ガイドライン。各デバイスのスクリーンサイズやUIの詳細などを確認したいときに。

adaptivity_and_layout_-_visual_design_-_ios_-_human_interface_guidelines_-_apple_developer

 

 

 

The iOS Design Guidelines

iOSをつかった制作に必要な知識やテクニックをわかりやすくまとめたデベロッパー向けチートシート。

the_ios_design_guidelines_-_ivo_mynttinen___user_interface_designer

 

このリストは随時更新予定となっています、ブックマークしておけばいざと言うときにも便利かもしれません。