Webデザイナー・開発者向けの37個のチートシート集まとめてみた。

今回はウェブ制作者・開発者向けにウェブ上にある様々なチートシートをまとめてみました。

いろいろなジャンル・プログラミング言語のチートシートを集めたので、使いそうなものはダウンロードしておきましょう!

こちらもCHECK

【月900万前後】アフィリエイト収益・ポイントサイト収益を公開してみた。

続きを見る

おすすめの在宅副業51選!お金を稼ぐ方法をランキングしてみた【2020年版】

続きを見る

デザイナー向けのチートシートまとめ

イラストレーターのショートカットキーリスト

adobe:illustratorチートシート

adobe製のIllustratorのショートカットキーリストです。

Webデザイナーがよく使う機能を選んで作られています。

このリストは印刷できるので、作業中によく見える場所に貼って活用しましょう!

Photoshopのショートカットキーリスト

adobe:Photoshopチートシート

adobe製のPhotoshopのショートカットキーリストです。

Webデザイナーがよく使う機能を選んで、ショートカットキーにしています。

このリストは印刷できるので、作業場の近くに貼っておくと見やすいですね。

Photoshop CS3とIllustrator CS3のA4サイズ全ショートカット一覧表

PhotoshopとIllustratorのショートカットキー一覧をまとめたチートシートです。

ここでは中・上級者向けのショートカットキーが紹介されており、かなり細かい機能まで網羅されています。

またMac版・Windows版に分けられているので、印刷してすぐに使えます。

カラーシート

Color Combination Cheat Sheet

さまざまな色の基本原則がわかるカラーチートシートです。

使いたい色を直感的に選んで、その色のコードを調べることができます。

オンラインシートなので、ブックマークに保存しておくとすぐに調べられます!

Web Designer Color Reference Hexagon  Mouse Pad

Webデザイナー向けのカラーチートシートです。

拡大するとそれぞれのカラーのコードがわかります。

色彩バランスを把握しやすいので、デザイン時に重宝します。

ウェブ制作者向けのチートシートまとめ

HTMLのチートシート

HTML Cheat Sheet

HTMLタグがまとまったオンラインチートシートです。

必要なHTMLタグをサイト内で調べると、すぐに適切なコードが提案されます。

PDFでもダウンロードできるので、よく使うコードは印刷しておくと良いでしょう。

HTML5タグ★チートシート

HTML5のチートシートです。

かなり詳細にまとめられているので、辞書のように使うこともできます。

印刷して参照するのが向いているので、すぐに確認できるように手元に置いておきましょう。

HTML AND CSS CHEAT SHEET

HTMLとCSSの基本コードがまとめられたオンラインチートシートです。

基本的なデザインのコードだけでなく、カラーやスニペットなどもおさえており、実践的なチートシートだと言えます。

Webデザイン初心者の方はまずここから始めると良いでしょう。

HTML5 Cheat Sheet

HTML5のタグが網羅的にまとめられたチートシートです。

日本語版がないことがデメリットですが、簡潔な英語しか使われていないので、直感的にわかる部分も多いことでしょう。

PDFでも画像でもダウンロードできるので、印刷して利用するのがおすすめです。

The HTML 5 Mega Cheat Sheet

こちらもHTML5のタグが網羅的にまとめられたチートシートです。

日本語版はありませんが、視覚的にわかりやすいシートなので、大きく困ることはないでしょう。

またブラウザ対応の一覧も付属しているので、自分が使っていないブラウザでの動きを調べることもできます。

HTML5 Canvas Cheat Sheet

HTML5 CanvasのAttributes・Methodsを中心にまとめられたチートシートです。

項目別に、視覚的にわかりやすく表記されているので、参照しやすいのではないでしょうか。

日本語版はありませんが、Google翻訳を適用できます。

Web Code Tools

HTMLだけでなく、CSS・Meta Tags・Twitter Cardなど、複数のチートシートが用意されています。

実際に表示されるデザインとコードを同時に見ることができ、ワンタッチでコピーできるので、使いやすいオンラインツールです。

また生成する文章を変更し、そのプレビューを見てからコードをコピーできるので、カスタマイズも簡単です。

CSSのチートシート

CSS Reference

CSSに関するリファレンスです。

網羅的に情報がまとまっているので、CSSに関する辞書として使うことができます。

それぞれの情報では、解説・具体的な使用例・ライブデモが用意されています。

CSS Flexbox Cheatsheet

CSS Flexboxのオンラインチートシートです。

項目に沿ってチートシートが分類されており、必要な項目をクリックするだけでコードをコピーできるようになっています。

直感的な簡単な操作が魅力ですが、すべて英語表記なのがデメリットです。

CSS Grid Cheatsheet

CSS Gridのオンラインチートシートです。

CSS Flexbox Cheatsheetと同じように、項目ごとにチートシートが分類されていて、クリックするだけでコードをコピーできます。

Web制作はもちろん、CSSの学習にも役立つでしょう。

CSS Alignment Cheatsheet

CSSを揃えて整理するためのチートシートです。

既存のCSSをコピペするだけではズレが生じるので、きちんと整理して記述しましょう。

CSS Alignment Cheatsheetでは、適切な揃え方を確認できます。

Most Practical CSS Cheat Sheet Yet

より実用的な機能を求めたCSSのオンラインチートシートです。

要素ごとに各コードがまとまっており、縦版・横版の好きなバージョンで見ることができます。

PDFでダウンロードできるので、見やすい場所に貼っておきましょう。

CSS3 Cheat Sheet For Smart Phone Site

スマートフォンサイト用のCSSのチートシートです。

スマホ版とPC版で表示を分けている場合や、スマートフォン専用サイトの場合に役立ちます。

ただし最近はレスポンシブ対応のサイトを作ることが多いので、なるべくレスポンシブを採用する方が簡単です。

The CSS3 Mega Cheat Sheet

CSSに関する情報がかなり網羅的にまとめられているチートシートです。

チートシートというよりも、辞書的なリファレンスとして使う方が良いでしょう。

ただし日本語には非対応なので、使いにくさはあります。

CSS 3, Media Queries Cheat Sheet

CSS3のMedia Queriesのチートシートです。

デスクトップ・タブレット・スマートフォンに対応するレスポンシブを作成するときに役立ちます。

3つのコードから選んでコピペするだけなので、英語が分からなくても十分利用できます。

CSS3 Animation Cheat Sheet

CSSでアニメーションを作るためのチートシートです。

英語版しかありませんが、Google翻訳で対応できます。

簡単な操作でアニメーションのコードをコピペでき、プレビューも見れるので、かなり使いやすいチートシートです。

ワードプレスのチートシート

ワードプレスのテンプレート構成リスト

WordPress公式の基本的なテンプレートチートシートです。

サイトの根本的なデザインを編集したいときに役立ちます。

そのままコピペするよりも、これを雛形にデザインを組み立てるのがおすすめです。

WordPressテンプレートタグチートシート

WordPressのテンプレートのチートシートをまとめたWebサイトです。

簡潔な解説がわかりやすいので、初心者でも楽に使えるでしょう。

特に非推奨タグの説明は必ずチェックしておきたい情報です。

WordPressチートシート日本語版

WordPressのテンプレートのチートシートです。

phpファイルやデザインを記述するときに必要なテンプレートがまとまっています。

また条件分岐タグやループタグも用意されているので、応用的な記述も可能です。

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

デザイナーとしてWordPressを納品するときに、どんなことをチェックすれば良いのかをまとめたWebサイトです。

かなり実践的で詳細な条件をリストアップしているので、納品前には一つひとつチェックしていきましょう。

チェックする項目を統一しておくと、毎回一定以上の品質を維持できるのでおすすめです。

iPhone・iPad・Androidの仕様リスト

Adaptivity and Layout

Apple公式のiOSガイドラインです。

iPhoneやiPadの仕様についてまとまっているので、アプリ開発者の人は必見ですね。

特に各デバイスの画面やスペック、UIを確認するには最適なリストです。

Popular Screen Resolutions: Designing for All

Android・iPhoneの仕様・スペックをまとめたサイトです。

デバイスの画面の大きさやピクセルサイズを確認したり、比較したりできます。

アプリ開発をする方には必須のツールです。

Sassのチートシート

Sass Cheat Sheet

Sassのオンラインチートシートです。

MixinsやColor functionsなど、基本的なコードがまとめられています。

このサイトにはほかにもたくさんのチートシートがあるので、管理を一元化できますね。

SASS::Script Cheat Sheet

Sassのスクリプトチートシートです。

このサイトは、自分でチートシートを作れることが特徴です。

既存のチートシートを使っても良いですし、新しくチートシートを作っても良いでしょう。

Vue.jsのチートシート

Vue.js Cheat Sheet

Vue.jsのチートシートです。

基本的なコードが機能別に分類されています。

サイト内分類がかなり見やすいので、必要なコードを簡単に探せるでしょう。

jQueryのチートシート

jQueryのチートシート

jQueryの網羅的なチートシートです。

英語版しかありませんが、説明が丁寧でわかりやすくなっています。

チートシートとしても辞書的にも使える汎用性の高いシートです。

jQuery Quick API Reference

jQueryのリファレンスサイトです。

jQueryを使用していてわからないことがあった際に調べるツールになります。

機能・項目ごとに色分け・レベル分けされているので、見やすいことが特徴ですね。

JavaScriptのチートシート

JavaScriptのチートシート

Javascriptの基本的なタグについてまとめられたチートシートです。

これだけでデザインを作るのは難しいですが、リファレンスとして使う分にはちょうど良いでしょう。

具体的なコードのチートシートと合わせて使うと効果的です。

MySQLのチートシート

MySQLのチートシート

MySQLの基本的なチートシートです。

英語がわからなくても十分理解できるくらい、視覚的にわかりやすくまとまっています。

PDFとLaTeXでダウンロードできるので、デバイスに合う方を選びましょう。

SEOチートシート

SEOチートシート

SEOの基本的な用語についてまとめられたチートシートです。

日々情報が変動するSEOのなかでも、変わることのない基本中の基本をおさえたシートになっています。

ただしSEOは定期的に大幅なアップデートがなされるので、情報が古くなっていないか必ず確認してください。

Unix・Linuxのコマンドリファレンス

Unix・Linuxのコマンドリファレンス

Unix・Linuxのコマンドを説明したリファレンスです。

日本語表記で、簡潔かつ的確な説明なので、初心者でもわかりやすくなっています。

ショートカットキーもまとまっているので、ぜひ活用してください。

正規表現のチートシート

正規表現のチートシート

コードの正規表現をまとめたチートシートです。

コードは正しい表現をしなくてもデザインとして表示されるものもありますが、正規表現じゃないと表示されないもの・正規表現の方が読み込みが速いものもあります。

小さなことですが、サイト全体では大きな違いになることもあるので、正規表現を覚えておいて損はないでしょう。

  • この記事を書いた人

きぐち

30代。猫好き。ポイントサイトとブログで累計5億円以上稼いだノウハウをまとめてます。メインコンテンツはこちらから! → Lv.1 ネットで稼ぐって?

2020年最新ポイントサイトランキング

【1位】モッピー

ポイントサイトのモッピー

会員数800万人の国内最大級のポイントサイトです。Amazonや楽天でのショッピングもお得になるなど、ポイ活には必須レベルでおすすめです。東証一部上場企業が運営しているため、安全性も最高レベルです。

【2位】ECナビ

ECナビ

レストランでの食事代が無料になる「覆面モニター」やゲームのインストールで稼げる「スマホアプリ案件」に強いポイントサイト。ECナビも東証一部上場企業が運営しているので、安全性はバッチリ。

【3位】げん玉

げん玉

私も10年近く、毎月50万円前後を稼いでいる大手ポイントサイトです。最大10万円分のポイントが当たる「モリガチャ」などが目玉のコーナーです。

-Web制作とSEO

© 2020 副業クエスト100