「サイト制作やコーディング、もっと楽にできないかなぁ」

そんなことを考えたことはありませんか？

今回はレスポンシブECサイトのコーディングに取り組む中で、「これは外せない！」と思った便利ツールを３つご紹介します。

どれも無料で簡単に利用できるものばかりですので、ぜひ一度お試し下さい。

Cacoo

WEBサイトも家も、全てを左右するのは「設計図」です。

WEBサイトの設計図とも言える「ワイヤーフレーム」をより簡単に作成できるツールとして、「Cacoo」をお勧めします。

ワイヤーフレームといえば、ExcelやPowerPointで制作されている方が多いのではないかと思います。

Cacooを使うことで「各パーツのサイズを細かく指定できること」や「UIパーツが豊富なこと」、そして「PowerPointやpdf出力が可能なこと」などなど様々な便利機能が使用できます。

Cacooのメリットについての過去記事→ディレクター必見！Cacooで作るワイヤーフレームがとても便利

「960 grid」を使うとより便利に！

またCacooの便利な点として、Cacooストアからテンプレートやステンシルをダウンロードできることがあります。

中でもワイヤーフレーム制作に非常に便利なものが「960 grid – 12 col 60 wigth 20 gutte」です。

これを使用することで、デザイン作成・コーディング時に「このコンテンツだけ微妙に横幅が違う！」ということが無くなります。

また、次に紹介する「CSSフレームワーク」をより効果的に使用できるなどのメリットもありますので、ぜひCacooでのワイヤーフレーム作成時にはこの「960 grid – 12 col 60 wigth 20 gutte」を使用して見て下さい。

Responsive Grid System

Cacooで960Girdを用いたワイヤーフレームを作成した後は、基本レイアウトのコーディングです。

ワイヤーフレームのグリッドに合わせてコーディングを実施することで、基本的なレイアウトの調整工数を少なくすることができます。

ここでお勧めしたいのが「Responsive Grid System」です。

その名の通り、レスポンシブサイトのグリッドが収められたCSSフレームワークなのですが、他のものと比較して圧倒的に軽量です。

以前に紹介記事を作成していますので、詳細については以下の記事をご覧ください。

→今までの常識を覆す!?レスポンシブかつ超軽量なCSSフレームワーク

Online Markdown Editor

サイト制作時に意外と手間なのが、各コンテンツのマークアップです。

そこでコンテンツのマークアップにはOnline Markdown Editorをお勧めします。

Online Markdown Editorはブラウザ上でMarkdownが利用できるサイトです。

Markdownとは、GitHubやTumblrなどでも採用されている簡単にHTMLタグが記述できるマークアップ言語です。

この記事も「Online Markdown Editor」を利用して作成していますが、手打ちでマークアップする時の半分以下の時間で書き上げることができています。

最低限知っておきたい5つのMarkdown記法

ブログ記事を作成する際に使用することの多いタグ５つについて、簡単にMarkdown記法をまとめました。
この他にもul,li,tableタグなども使用することができますので、詳しくはMarkdown記法 チートシート – Qiitaなどをご覧ください。

Hxタグ

行頭に「#」をつけるだけでHx系タグの宣言が可能です。
「#の数＝x」ですので、h3タグを使いたい場合は「###」という書き方をすることになります。

#h1
##h2
###h3
####h4
#####h5
######h6

pタグ

文章の段落を作る場合、一行間隔を開けるだけでその区間のテキストがpタグでマークアップされます。
WordPressでもよく見られる仕様ですので、Markdown記法の中でも最も身近な存在かもしれません。

pタグでマークアップされるテキスト

pタグでマークアップされるテキスト

brタグ

pタグではなくbrで改行したい場合は、文末に半角スペース２つを入れて改行します。

pタグでマークアップされるテキスト  
半角スペース２つで改行されたテキスト

pタグでマークアップされるテキスト

strongタグ

タグを強調したい場合、「Strongタグ」のように**２つで強調したいテキストを挟みます。
bやemではなくstrongでマークアップされますので、使いすぎにはご注意下さい。

**強調されたテキスト**

aタグ

リンクを追加する場合、追加するテキストを[リンクテキスト]のように[]で囲います。
その直後に(http://～)と記述することで、簡単にリンクを作成することができます。

[リンクテキスト](http://hogehoge.com/)

まとめ

「車輪の再開発」という言葉があるように、仕組み・原理について理解することは重要です。

便利なツールを積極的に活用することでスケジュールに余裕を持ち、サイトの細部にまで意識を向けることができるようになればと思います。