calendarcodediamondfacebookfingerglobalgoogleplushatenahomepagetopplainpocketrssservicetwitterwordpresshome2searchfoldernext-arrowback-arrowfirst-arrowlast-arrow

1ページで完結、Web制作者が助かるチートシート・資料・PDFまとめ

webcheatsheet

ページを移動せずにテンプレートや仕様書を確認したい。今回はPCの横に貼ったり印刷したり、ワンクリックで見れるように、1ページで完結している資料をまとめました。Web制作をする上で便利なチートシートや資料・仕様書まとめです。

PR
IT/WEB業界への転職なら
Sponsored Link

もくじ

WordPress版 受託用マニュアル

タスクランナー

JavaScript 代替言語/JST

コーディング用

MVC(JavaScript フレームワーク)

EC-CUBE 標準規約

トレンドのエディタ/git

WordPress版 受託用マニュアル

お客様からのサイト制作依頼や問い合わせ、フローの説明を作るときにどういったこと記述し返答すればよいのか、納品時にお渡しする管理マニュアルはどのような手順で作成すればよいのか。

問い合わせ後に使うヒアリングシートや、構築後に使える管理マニュアル・QCシートなどWordPressに付随する資料をまとめました。

1.ヒアリングシート

cheatfile_hearing

お客様からのサイト制作依頼に素早く対応できるように、メール返信例と打ち合わせで使えるヒアリングシート。

2.WP版ホームページ制作の流れ

WordPressに特化した、いわゆる「簡易的なホームページ制作の流れ」をクライアント用にわかり易く資料にまとめたもの。お客様側から見て、流れと確認事項を理解できるように構成されています。

3.WordPress管理マニュアル

WPでサイト納品時にお渡しする「管理マニュアル」の資料。ログイン情報の記載、ダッシュボードの解説、記事更新方法、画像や文章の作成方法など必要最低限なことのみを書いてあるので、クライアントから見て分かりやすい管理マニュアルとなっています。

4.WP版品質チェックシート

cheatfile_qcsheet

WP公開後のトラブルを未然に防ぐために、サイト公開前にチェックしておきたいチェックリスト。テスト時に必要なユーザー制限・証明書のテスト・URLの書き換え・法人用ドメイン登録時の注意事項など実践的な内容。

5.Wordpress タグ

cheatfile_functions

基本的なファイル名、ファンクションやテンプレートタグ一覧。

タスクランナー

SassコンパイルやJS圧縮・テスト実行などを自動実行するツールのことをタスクランナーといいます。自動化することで作業を高速化し、ミスを軽減することができます。この項目ではフロントエンドが助かる、タスクランナー・MVC・フレームワークに関するチートシートをご紹介します。

6.gulp

cheatfile_gulp

gulpはGruntと比べて分かりやすく高速、コード量も少なくJavaScriptで書けるというメリットがあるので人気です。Sass・画像やJS圧縮・テスト実行などの処理を簡単なコマンドで自動化します。以下はビジュアルが綺麗なgulpのチートシート。

7.Bower

cheatfile_bower

Grunt/gulpはSassや圧縮・テスト実行などの処理を自動化するのに対し、BowerはJSライブラリや依存するCSS等をコマンドで簡単にインストールできるクライアントサイド版ツールです。ブラウザで動くAngularJSやjQueryなど、最新のパッケージに付随するリソースをインストールすることができます。

bower.jsonを作っておくと、保存したライブラリを簡単にインストールできます。Bowerをインストールするにはnpm(Node.js のパッケージマネージャ)が必要となります。

JavaScript 代替言語 / JST

少し前、jsの処理を簡潔・安全に実装したいという流れから、CoffeeScriptやTypeScriptというシンタックスシュガー(人間にとって分かりやすい短い構文)が登場しました。

8.TypeScript

cheatfile_typeScript

JavaScriptを書きやすくし、バグの可能性を減らせるのがTypeScriptのメリット。コードをコンパイル(変換)すると、JavaScriptのソースコードを吐き出します。Playground - Welcome to TypeScriptで処理を試せます。詳しくはこちらのTypeScriptってどんなもの? プロ生ちゃんと始めてみよう! - Build Insiderが分かりやすいです。

9.CoffeeScript

cheatfile_coffeescript

CoffeeScriptも、Pythonなどから影響を受けた、コードをシンプルに記述できるJavaScriptのシンタックスシュガーです。JavaScriptと比較すると短くコードも見やすいです。CoffeeScript TRY COFFESCRIPTから処理をテストできます。

10.Jade

cheatfile_jade

JadeとはHTML を書くためのJavaScript テンプレートエンジン。インデントと閉じタグ不要の簡易的な記述でHTMLを出力してくれます。こちらの記事Jade について。 · GitHubが驚異的に分かりやすいです。

コーディング用

11.Chrome 開発ツール

cheatfile_chromedev

Chromeデベロッパーツールのチートシート。開発ツールはCSSの調整やJavaScriptのコンソール出力などで使うことが多いと思います。こちらはWin / Mac 両対応のショートカットキーを記述してあるので便利です。

12.html5 / css ガイドライン

cheatfile_htmlcss

Googleによるhtml / css のガイドラインを翻訳したもの。原文の方はGoogle HTML/CSS Style Guideで。

13.メディアクエリー仕様書

cheatfile_mediaqueries

ブラウザ・デバイスに応じて見え方を切り替えていくメディアクエリー。こちらはW3Cの公式ドキュメント(翻訳版)です。

14.CSS3セレクタ仕様書

cheatfile_cssselectors

W3CによるCSS3セレクタの翻訳。

15.SASS

cheatfile_sass

CSS記述の負担を減らすSASSのチートシート。

16.各ブラウザチェックリスト

cheatfile_browser

CSS3の各ブラウザによる対応状況。エビスコムさんの方は日本語な上、コンパクトにまとめてあるので見やすいですね。

17.SVGのブラウザサポート状況

cheatfile_svg

SVG版ブラウザのサポート状況。

18.Canvas

cheatfile_canvas

Canvasとはブラウザ上で図を描くために作られたもの。プラグインなどを使わずに図形を描けます。こちらはCanvasのチートシートです。

19.Bootstrap

cheatfile_bootstrap

コンパクトにまとめられたBootstrapのクイックガイド。

20.JIS X8341-3

cheatfile_access

JIS X8341-3とは、簡単に言うとウェブコンテンツのあり方を示したガイドライン。今は多くのデバイスが普及しているのもあり、多くの環境にてコンテンツや情報を届けるという考え方を理解しておく必要があります。こちらはアクセシビリティに関するガイドラインです。

MVC(JavaScript フレームワーク)

フロントエンド開発規模が増大していることもあって、最近ではビジネスロジックとデザインを別々に扱う流れが増えています。MVC(Model-View-Controller)とは、処理を分ける(例:データ・UI出力・制御)という考え方であるアーキテクチャ。主にアプリケーションのフレームワークなどに使われます。MVCモデルに関してはこちらのMVCモデルの概念を漫画で解説してみる | hijiriworld Webが分かりやすいです。

代表的なもの3つのチートシートをご紹介します。

21.AngularJS

cheatfile_angularjs

ひと通りの機能が揃っているGoogleが作ったJavaScriptフレームワーク。

22.Backbone js

cheatfile_backbone

23.React js

cheatfile_React

EC-CUBE 標準規約

24.EC-CUBE標準規約

cheatfile_eccubename

EC-CUBEの命名規約。ファイル名・クラス名・関数名などから、インデントの指定やコメント例まで。

25.プラグイン開発仕様書

cheatfile_ecplugin

こちらはプラグイン開発方法について。

トレンドのエディタ/git

emmet / gitの他、制作会社が使うトレンドのエディタから、定番のものまで。主にエディタ操作を便利にするショートカットキー対応表です。

26.emmet

cheatfile_emmet

27.Atom

cheatfile_atom

28.SublimeText / Brackets

cheatfile_sublimetext

29.Vim

cheatfile_vim

30.GitHub

cheatfile_github

スポンサード リンク

この記事を書いた人
投稿者:commte

株式会社コムテ代表取締役。2015/8:弊社にてWeb制作スクールを開始。 WebDesign + Web制作 (最新情報 配信)。おっとりした話し方をするおっさん。

URL:西田 鉄平
この後によく読まれている記事

Comments

  1. […] 5. Webサイト制作:1ページで完結、Web制作者が助かるチートシート・資料・PDFまとめ この記事をRTする […]

Leave a Comment

コメントする