このブログがフロントに関する記事が多いもんだから、たまにデザイナーと呼ばれることがあるんですが、僕は業務としてはデザインよか制作ディレクションの方がどちらかと言えばメインなんですよね。

そんなディレクターとしての役割の一つに、周りにいる優れたデザイナーやプログラマー、デベロッパーの業務効率を考えることが挙げられます。

何を取るわけでもなく中途半端な僕ですが、ディレクターとして周りの各プロフェッショナルの役に少しでも立てればと、そして制作する上での効率を向上させるべく色々情報収集をする中で、よくチートシートの存在を目にします。（チートシートってどれだけ普及してるのかわかりませんが、つまりカンニングペーパーのことらしいです。）

WEB屋にとってのチートシートって、どれだけ優れた技術力やデザイン力を持っていても、何かしら新しい発見がある物ですよね。以前書かせてもらった時間の価値は人によって違う！30分が100時間を生む5つの考え方でも書いたよう、たとえばショートカットキー一つとっても、結果として年間で数百時間を短縮することにつながる可能性があるわけです。

この数百時間があれば、下手すればプロジェクト一つ完成するかもしれませんね。

というわけで、今日は僕がこれまでEvernoteに貯めに貯めておいたチートシートネタを一挙大公開。このブログを見てくれている人たちの作業効率向上の役にちょっとでも立てればうれしい限りです。で、逆にこんなチートシート知ってるよ的な物があれば教えてください！

 

 

HTML5に関するチートシート

HTML5 Visual Cheat Sheet

個人的なオススメはこれ、ビジュアルが美しい上にPDFなのでEvernoteに突っ込んでいつでも見れるようにさせてもらっています！

HTML 5 pocket book

見やすさならこれも見やすい。iPhoneで見ながらとかが好きな人にはうってつけかも。

The Ultimate HTML 5 Cheat Sheet | Bit Rebels

シンプルかつ充実度ではかなり便利なワンページ型のチートシート。

HTML 5 Cheat Sheet (PDF) – Smashing Magazine

Smashing MagazineさんからもHTML5のチートシートがリリースされていました。

HTML Cheat Sheet for Transition to HTML 5

HTML5 Canvas Cheat Sheet

※2016/11/10 指摘頂きリンク先を変えました。

 

デザインに関するチートシート

Free Download: Cheat Sheet For Designing Web Forms – Smashing UX Design

こういうチートは想像してなかった。フォームデザインに関するチートシート。

Facebook Cheat Sheet: Sizes and Dimensions | DreamGrow Social Media

いや、マジこれ便利だったわ。Facebook Pageの提案時なんかに参考になるプロフィール写真やページ、写真のサイズ表

Periodic Table of Typefaces on the Behance Network

これは結構出回ってる気がしますね。デザイナーの人は壁紙とか一時期これだった人も多いかも。

font.is » Wallpaper : Font Anatomy

このネタ、今度記事にしようと思ってるけどフォントの解体図

 

Javascriptやjsライブラリに関するチートシート

jQuery Visual Cheat Sheet 1.6

やっぱjQueryのチートはどれをとってもこれが一番見やすい。

Visual jQuery 1.2.6

Downloading – Added Bytes Web Application Development

以外にない気がするJSのメソッドとかXMLHttpRequest系のチートまとめ

 

Googleに関するチートシート

Gmail Shortcuts (printable cheatsheet)

あたしゃーGmailショートカットは必須だと思うわけですよ。

Gmail Cheat Sheet

Google ドキュメントのキーボード ショートカット – Google ドキュメント ヘルプ

Gmail, Google Reader – Cheat Sheets

Google Maps Cheat Sheet

Google Map API系のドキュメントやらユーザーガイドやらのURLがまとまってる、良く忘れるから重宝した。

 

Movable Type Cheat Sheet – Movable Type Spickzettel: Movabletype : CSS Webdesign Weblog Tipps

MTのチートシートだけど古い。。。

SEOに関するチートシート

The Web Developer’s SEO Cheat Sheet | SEOmoz

恐らくリリースされた時結構話題になってたと思うSEOに関するチートシート。メズラスィ！

Cheat Sheet: SEO for WordPress

パーマリンクの最適化とか、htaccessの設定とかWordpressを使ってSEOを考える時に見るチートシート

SEO Cheat Sheet: Anatomy of A URL | SEOmoz

URLの構造のチートシート。

 

プログラマに役立ちそうなチートシート

PHP, Perl, Python, Ruby, Smalltalkの違いを比較したチートシート | コリス

Python Cheat Sheet – Added Bytes Web Application Development

Downloading – Added Bytes Web Application Development

PHP Cheat Sheet (V2) – Added Bytes Web Application Development

SQL Server Cheat Sheet – Added Bytes Web Application Development

MySQL Cheat Sheet – Added Bytes Web Application Development

 

Linux使いとかが役立ちそうなチートシート

Linux commands wallpaper | QuicklyCode

Ubuntu Cheat Sheet | FOSSwire

Linux rpm cheat sheet

 

Office系のチートシート

Word 2000 Tutorial · FGCU Technology Skills Orientation

Excel 2000 Tutorial · FGCU Technology Skills Orientation

Power Point 2000 Tutorial · FGCU Technology Skills Orientation

 

セキュリティ関係のチートシート

XSS (Cross Site Scripting) Cheat Sheet

SQL Injection Prevention Cheat Sheet – OWASP

ASP.NET Security Architecture Cheat Sheet For Very Busy Architects – Alik Levin’s – Site Home – MSDN Blogs

 

多すぎて途中からいったい自分が何をまとめているのか分からなくなってしまいましたが、まずは僕のEvernoteにあるチートシートやらショートカット系のまとめやらをご紹介させてもらいました。

結構バージョン古いアプリケーションのチートシートなんかもあります。本当は全部の用途やらどんな時役立ったかなども事細かに書いて行きたいのですが、今日はここまでで。

ちょっと乱雑なまとめ方になってしまったのがちょっと心苦しいですが、見てくれる人にとって、ちょっとでも業務効率や時間の節約に繋がりそうな物があれば是非参考までに見ておきましょう！

ちなみに、僕はPDF、テキストで書かれたチートシートであれば全部Evernoteのチートノートというノートにぶち込んで、いつでも検索できるように自分なりに書き換えたりしています。

他人が見たら間違いなく意味不明なチートノートなんですが、何をチートするのかってその人次第だと思いますので、是非チートシート＆Evernoteの組み合わせも試してみてはいかがでしょう？

 

ちなみに余談ですが僕のSennaという名前は友達がつけたあだ名なのですが、この名前はF1界の音速の貴公子アイルトン・セナから来ています（ファンの人には怒られるかもしれませんが）。作業効率とスピードのことを口酸っぱくウザがられるくらい語っていた時に、完全嫌味で「君はWEB制作のセナになりたいんだね。」と言われたのがキッカケでした。あと純粋にモータースポーツ大好きっ子なもんで。

いつの日か、嫌味じゃなくそう呼ばれるようになれるよう、今日も明日も作業効率については考えていきたいと思っています。