知らなきゃ損！ Webデザインの作業効率がアップするチートシート13選｜レバテッククリエイター

クリエイターをお探しの企業様へ

クリエイターのフリーランス求人・案件募集
Tips
知らなきゃ損！ Webデザインの作業効率がアップするチートシート13選

2016年3月24日

チートシートで作業効率化＆高速化

知らなきゃ損！ Webデザインの作業効率がアップするチートシート13選

Web制作をしていて、「あれ？あのショートカットなんだっけ？」「どのタグを使うんだっけ？」とうっかり忘れてしまうことはないでしょうか。
そんなときにチートシートを活用すると、目的のショートカットやタグなどを素早く見つけられるので、いちいち検索する手間と時間が省けて効率的です。
そこで今回は、持っておくと役立つWebデザイン関連のチートシートを13個ピックアップしてご紹介します。

Photoshop / Illustratorのチートシート

まずはWeb制作に必須のPhotoshopとIllustratorのショートカットをまとめたチートシートをご紹介します。
持っておくと、まだ覚えていないショートカットや忘れてしまったショートカットを確認できて便利です。

１．2015 Adobe Photoshop Keyboard Shortcuts Cheat Sheet（日本語版）

http://im5769.com/post-1095/

Photoshopショートカットの英語版チートシートを日本語訳したものです。
オリジナルでも充分見やすいのですが、日本語に訳してくれているのでさらに見やすくなっています。
作者に許可をとって翻訳されているそうなので、本家公式の日本語版ということになります。

２．2015 Adobe Illustrator Keyboard Shortcuts Cheat Sheet

http://www.setupablogtoday.com/adobe-illustrator-keyboard-shortcuts/

先ほどのPhotoshopショートカットのチートシート（英語版）と同じ方が作成しています。
残念ながらIllustrator版の日本語訳はないのですが、非常に見やすいので重宝します。
この方は他にDreamweaver、InDesign、After Effectsなど、Adobe製品のチートシートを多数公開しています。

参照：CHEAT SHEETS / makeawebsitehub.com
http://makeawebsitehub.com/category/cheat-sheets/

コーディング関連のチートシート

コーディングをしていると、タグがわからなくなったり、忘れてしまったりすることってよくありますよね。
HTMLやCSSなど、コーディング関連のチートシートを手元に置いておくと作業が捗ります。

３．HTML5タグ★チートシート

http://www.atmarkit.co.jp/fdotnet/chushin/cheatsheet_02/cheatsheet_02_01.html

「@IT」さんが提供しているHTML5タグのチートシートです。
手元に置いておけば、ふとタグを忘れてしまったときの検索の手間が省けます。

４．HTML-特殊文字

http://pst.co.jp/powersoft/html/index.php?f=3401

特殊文字を一覧にまとめたチートシートです。
頻繁には使わない特殊文字も多いので、なかなか重宝します。

５．CSS3 Cheat Sheet For Smart Phone Site

http://tech.furyu.jp/blog/?p=1428

スマートフォンサイト用のCSS3をまとめたチートシートです。
いまやPCよりもスマホからのアクセスが多いサイトも珍しくありませんので、活用の機会は少なくないでしょう。

６．CSS2 / CSS3セレクタ一覧

http://zero.css-happylife.com/selectors/

CSS2.1までのセレクタ一覧とCSS3セレクタを一覧でまとめてあります。
各セレクタの具体的な説明とサンプルも見られます。

７．jQuery Quick API Reference

https://oscarotero.com/jquery/

カラフルに色分けされたjQueryのリファレンスです。
厳密にはチートシートではありませんが、jQueryで迷ったときに役立ちます。

８．Javascript Cheat Sheet

http://overapi.com/javascript

こちらはJavascriptのチートシートです。
jQuery、PHP、Node.JSなどのチートシートもあります。

WordPress関連のチートシート

世界で最も普及しているCMSのひとつであるWordPress。
Webデザイナーやコーダーも関わることが多いWordPress関連のチートシートをまとめました。

９．WordPressチートシート

http://www.webcreatorbox.com/tech/japanese-wordpress-cheat-sheet/

人気ブログの「Webクリエイターボックス」さんが作成したWordPressのチートシートです。
印刷用にA4サイズのPDFで作られているので、印刷してデスクに置いておけばテンプレートタグなどをど忘れしてもすぐに確認できます。

１０．WordPressテンプレートタグチートシート

http://mignonstyle.com/wordpress-cheat-sheet/

WordPressのインクルードタグ、テンプレートタグ、条件分岐タグをまとめたチートシートです。
簡単な使い方や注意点も書いてあります。

１１．WordPress品質・納品チェックシート

http://commte.net/blog/archives/4990

WordPressで作成したサイトを納品する前に、品質チェックすべき項目をまとめたチートシートです。
「機能」「コーディング」「ドメイン」「UX」「表記とレイアウト」「ブログ」「WP管理画面」「管理マニュアル」「Google Analytics」「SEO」の各項目に分けてあり、チェックしやすくなっています。

Git関連のチートシート

「Git（ギット）」はオープンソースのバージョン管理システムです。
Webサイトの修正を繰り返しているとファイルが増え、いつ誰が何を変更したのかが管理しにくくなります。
「Git」は修正履歴を保存しておくことができるので、バージョン管理が捗ります。
Git初心者に役立つ、Git関連のチートシートをご紹介します。

１２．GitHub Git チートシート

https://training.github.com/kit/downloads/ja/github-git-cheat-sheet.pdf

GitHubトレーニングチームが作成した、「Git」のチートシートです。
コマンドラインからよく使われているGitの命令までを2枚にまとめています。

１３．Git Cheat Sheet 日本語版

http://textdrop.net/doc/git-cheat-sheet-ja/

こちらも「Git」のチートシートです。
作成方法からコマンドの流れまで1枚にまとめてあるので、GitHubが作成したチートシートとは違った見やすさがあります。

最後に

Web制作をしているといろいろなショートカットやタグを使うので、頻繁に使わないのものはうっかり忘れてしまうことが少なくないと思います。
チートシートを保存しておくと、そんなときに素早く目的の情報を探せるので、作業が捗りますよ。

クリエイターの求人・案件探しは、
レバテッククリエイターへ

レバテッククリエイターでは、フリーランスや派遣で働くクリエイターを対象とした求人・案件の提案サービスを行っています。Web業界やゲーム業界を中心に年間1000件以上（※）の取り扱いがあり、様々なスキルを活かせる案件の提案が可能です。
※2016年度実績自社調べ
求人・案件探しの相談をする

また、「今よりも年収をアップさせたい」「トレンドに敏感な現場でWebデザインスキルを磨きたい」などの理由からフリーランスへの転向を検討している方には、無料の個別相談会も実施していますのでお気軽にご相談ください。業界に精通したプロのコーディネーターが、一人ひとりの希望や状況に合わせて丁寧にサポートします。

「個別相談会」に申し込む

役に立った／参考になったと思ったら、シェアをお願いします。