【本日】誠に勝手ながら、全社員研修のため、2017年4月20日(木)の13:00以降はお電話によるサポート受付を休止させていただきます。

ECサイト構築クラウド型プラットフォーム

【本日】誠に勝手ながら、全社員研修のため、2017年4月20日(木)の13:00以降はお電話によるサポート受付を休止させていただきます。

モバイルファーストマーケティングラボ

圧倒的にサイト制作が楽になる!3つの便利ツール

  • 2014.05.21
  • 2018.04.10
  • 技術
圧倒的にサイト制作が楽になる!3つの便利ツール

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

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

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

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

Cacoo

cacooWF

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

Responsive Grid Systemイメージ

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

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

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

responsive.gs
Responsive Grid System

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

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

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

Online Markdown Editor

コンテンツを簡単マークアップ
コンテンツを簡単マークアップ

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

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

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

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

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

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

ブログ記事を作成する際に使用することの多いタグ5つについて、簡単に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で改行したい場合は、文末に半角スペース2つを入れて改行します。

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

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

strongタグ

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

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

aタグ

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

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

まとめ

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

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

”スマホで売れる”ためには必須の「レスポンシブECサイト」とは?

CTA-IMAGE 2019年、ECサイトの利用者は今やスマ―トフォンからが7割を超え、市場のニーズは完全にPCからスマホに転換しました。
また、検索エンジン大手のGoogleも「モバイルファーストインデックス」を打ち出し、スマホ対応の手段として正式に「レスポンシブWEBデザイン」を推奨しています。 そのような背景から、昨今のEC市場ではスマートフォンへの適切な対応が急務となっており「レスポンシブECサイト」のニーズが非常に高まってきています。本パンフレットではECサイト運営を取り巻く環境の変化を、レスポンシブECサイト構築導入実績No.1のプラットフォームである「aishipR」の機能や実績を踏まえながらまとめました。

・レスポンシブECサイトがなぜ今選ばれるのか
・これまでのECサイトの課題とは何なのか
・どのようにすれば解決できるのか

といったノウハウから、プラットフォーム変更で得られる効果の実例まで網羅して解説しています。
ECサイトの運営されておられる経営者様だけでなく、運営担当者様にも必ずお役に立つ内容となっておりますので、是非ご活用ください。
機能のご確認はお気軽にお問合せ、もしくは2週間無料お試し利用で。
aishipRの無料体験、お問合わせはお気軽に。説明会・資料請求も受付中。
0120-173-163
0120-173-163
無料体験
  • 無料体験
  • 問合せ
  • 説明会
  • 資料請求
  • 問合せ
  • 説明会
  • 資料請求
+