このページの本文へ

前へ 1 2 3 次へ

jQuery、HTML5も使って作る!

BiND4で、空腹時に絶対見てはいけないサイトを作る!

2010年09月28日 12時00分更新

文● ASCII.jp編集部

  • この記事をはてなブックマークに追加
  • 本文印刷

 記者の人生には大切なものが2つある。1つは猫、もう1つは食事だ。大切にしすぎたせいか、iPhoneのフォトライブラリーはその2つで埋まってしまった。1000枚中、500枚余りが食べものを撮影した写真だ。もはや、そういう端末だったのかとさえ思えてくる。

BiND for WebLiFE* 4

 そこで食べものの写真だ。美味しかったものをズラリと見せたい。でも、グルメサイトに投稿するのは抵抗がある。自分のサイトが作りたい。カッコイイやつを。どうせなら最新のウェブ技術で。でも知識はない。勉強する気もない。さてどうしよう。

 解決策は、最新のHTML編集ソフトを使うことだ。ズルではない。これを「大人のやり方」という。時間はかけず、出来は抜群。その卑怯な願いはどこまで叶うのか。「BiND for WebLiFE* 4 プロフェッショナル版」(2万8800円)を使い、サイトをゼロから作りはじめてみた。


■ GOHANSCII.jp(ゴハンスキードットジェイピー)

 今回、BiND4で作ってみたサイト。キャッチコピーは「お米しかないときは、このサイトをおかずにしましょう」。制作途中、ただお腹が空くだけのような気もしてきた。今ではそうとしか思えない。完成したサイトはこちらからどうぞ!

パッとできてスゴい! 【その1】
かわいいアイコンが簡単にデザインできる

 今回作るのは趣味のサイトだ。時間をかけても仕方ないので、逆に「短時間で出来ること」にこだわってみたい。初めはサイトの土台づくりから。ネコだらけのウェブサイト「NYASCII.jp」を作ったときと同じだ(関連記事)。あらためて紹介しよう。

 BiNDの良さは編集がとことん楽なことだ。テンプレートを選び、素材を追加していくだけ。つねにプレビューしながら編集できるのが便利だ。27種類(バリエーションは96種類)のテンプレートから、今回は企業ページのようにカッチリした「Style」を使ってみることにした。

基本は27種類あるテンプレートの中から、お気に入りを選ぶだけ

 素材のレタッチや簡単な加工はソフト上の機能「SiGN」で。ここで嬉しいのは2つ。1つは使えるフォントが40種類もあり、さらにすごくかわいいこと。もう1つは写真を指定するだけで、シンプルなボタンやアイコンが作れるところだ。

 要はPhotoshopなどの編集ソフトの簡易版が入っていると思えばいい。しかも、動作が軽い。レイヤーやマスク、加算・乗算合成といった難しいことを知らなくても、シンプルで見やすいデザインのページがサクサク作れるのはかなり快感だ。

「SiGN」でロゴを作るのは、テキストを入れ、フォントを指定するだけの簡単操作

SiGN編集画面。写真(image)、テキスト(text)、フチどり(shape)の3層をそれぞれ指定して編集する。Photoshopでいうところの「レイヤー」のようなものだ

(次のページにつづく)

前へ 1 2 3 次へ

カテゴリートップへ

注目ニュース

ASCII倶楽部

プレミアムPC試用レポート

ピックアップ

ASCII.jp RSS2.0 配信中

ASCII.jpメール デジタルMac/iPodマガジン