デザイン・Web制作の作業効率UP！便利チートシート17個まとめ

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

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

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

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

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

http://photoshopvip.net/92817

http://photoshopvip.net/95080

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

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

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

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

The Complete Adobe After Effects CC Keyboard Shortcuts For Designers Guide

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

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

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

The Complete Adobe Premiere Pro CC Keyboard Shortcuts For Designers Guide

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

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

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

Manual photography cheat sheet

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

http://photoshopvip.net/94514

http://photoshopvip.net/107075

http://photoshopvip.net/92950

Interactive typography cheat sheet

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

http://photoshopvip.net/100631

http://photoshopvip.net/79841

http://photoshopvip.net/80968

http://photoshopvip.net/105840

Color Combination Cheat Sheet

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

http://photoshopvip.net/design-basic-rule

http://photoshopvip.net/80368

http://photoshopvip.net/77524

http://photoshopvip.net/95427

http://photoshopvip.net/72189

HTML Cheat Sheet

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

>

CSS Flexbox Cheatsheet

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

CSS Grid Cheatsheet

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

Sass Cheatsheet

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

日本語版 WordPress チートシート

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

Human Interface Guideline: iOS Adaptivity and Layout

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

The iOS Design Guidelines

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

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