あなたのサイトに人が集まらない原因は“フォント”のせいだった？

BiND6.5のウェブフォントで印象的なサイトを作ろう

2013年06月18日 11時00分更新

文● 構成：ASCII.jp編集部写真●篠原孝志（パシャ）

オシャレ編集者ニシマキが指南
BiND6.5でサイトを作ってみよう！

　ここからは実際にサイトを作る手順を紹介していきたい。まずはテンプレート選び。と、いきたいが、いきなりテンプレートを見ても決まらないはず。最初はどんなサイトを作りたいかを思い描いてみよう。自分が作った作品を人に見せたい、経営しているお店を紹介したい、本格的な企業サイトが必要など。人とコミュニケーションが取りたい、ラクに更新したい、という要望も大切だ。ここでは仮に、今年の春にオープンしたばかりの知り合いの美容室サイトを作ることにする。

STEP1　作りたい内容にあわせてテンプレートを選ぼう！

テンプレートは一覧で見え、どんなサイトになるか想像がつきやすい。紹介テキストと合わせればすぐにイメージに近いサイトが見つかるだろう

　作るサイトが決まればいよいよテンプレート選び。テンプレートにカーソルを合わせるとどんなサイトに向いているか、規模感はどれくらいかを紹介するテキストが表示される。それを見ながら、じっくり吟味していこう。気になったテンプレートがあれば、プレビューで確認。同じテンプレートで色違いもあるので、しっかり見ていきたい。見やすいサイトなら柔らかい色や無色、目を引くサイトは派手目な色、という選択肢がよい。上級者向けに、ほぼ白紙の状態から作るテンプレートもある。

STEP2　HTMLがわからなくてもレイアウト可能

スマートモードはカンタンスピーディー、エディタモードは作り込みたい人向けだ。場合によってはモードを使い分けて作る、という方法もアリ

　テンプレートを選んだら次はサイトの作り込み。といってもカンタンで、どこにどんな要素を入れていくか決めるだけだ。BiNDはテンプレートの内容やレイアウトの変更を、「編集」と呼んでいる。「メイン」や「サイド」、「フッタ」などページのエリアがブロックごとに分かれ、追加するブロックや必要のないブロックを決めていく。ここである程度ページ全体の構成を決めたら、ブロックごとに編集画面を立ちあげて、メインのブロックに写真を入れ、その下に文章を入れるなど要素を追加していこう。

　各ブロックに要素を入れ込む方法はおもに2つ。テンプレートに従い、画面にテキストや写真、パーツを入れれば勝手にレイアウトしてくれる「スマートモード」と、ページに好きなコンテンツを、好きなように配置する「エディタモード」だ。スマートモードは、テキストや写真、動画など、入れたい要素が決まっていれば、まったくサイト制作の経験がなくても失敗することなく作れる。多少レイアウトにこだわりたいなら、エディタモードを使ってみよう。テンプレートをどんどんカスタマイズして自己流にアレンジだ！

STEP3　スマホ用のテンプレはもちろん
WPならスマホから更新もOK

スマホサイトはPC サイトを作るのと同じ要領でできる。小さな画面でどうすれば見やすいサイトになるか、いろいろと試しながら作ってみてほしい

　今サイトを作るならスマホでも見られる、ということを視野に入れておこう。PCサイトを作るのとスマホサイトを作るのは要領、見せ方が変わってくる。ただ、BiNDであれば決して難しくはない。ちゃんとスマホ専用のテンプレートが用意されている。また、BiND6.5には新たにウェブフォントをカッコ良く見せるタイポグラフィックなテンプレートも追加された。これを活用すれば、PCで見たときとスマホで見たときに差が出ることはなく、拡大表示しても粗くなったり、フォントが劣化したりはしない。

　更新を手軽したいなら、WordPress連携機能は外せない。WordPress専用のテンプレートを選んでサイトを制作すれば、更新の度にPCからBiND6.5を立ち上げることなく、外出先などでタブレットやスマホでも更新ができる。手順もカンタンで、入力フォームに写真やテキストを入れるだけだ。ブログに慣れている人であれば、このテンプレートでサイトを作り、更新はスマホで、というのがおススメだ。サイトのデザイン自体作り込めるので、決して既存のブログサイトっぽくならず、オリジナリティーも出せるはずだ。