このページの本文へ

前へ 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倶楽部

注目ニュース

  • 角川アスキー総合研究所

プレミアム実機レビュー

ピックアップ
1
Anker PowerLine III Flow USB-C & USB-C ケーブル Anker絡まないケーブル 240W 結束バンド付き USB PD対応 シリコン素材採用 iPhone 17 / 16 / 15 / Galaxy iPad Pro MacBook Pro/Air 各種対応 (1.8m ミッドナイトブラック)
Anker PowerLine III Flow USB-C & USB-C ケーブル Anker絡まないケーブル 240W 結束バンド付き USB PD対応 シリコン素材採用 iPhone 17 / 16 / 15 / Galaxy iPad Pro MacBook Pro/Air 各種対応 (1.8m ミッドナイトブラック)
¥1,390
2
KIOXIA(キオクシア) 旧東芝メモリ microSD 128GB UHS-I Class10 (最大読出速度100MB/s) Nintendo Switch動作確認済 国内サポート正規品 メーカー保証5年 KLMEA128G
KIOXIA(キオクシア) 旧東芝メモリ microSD 128GB UHS-I Class10 (最大読出速度100MB/s) Nintendo Switch動作確認済 国内サポート正規品 メーカー保証5年 KLMEA128G
¥2,386
3
Anker USB Type C ケーブル PowerLine USB-C & USB-A 3.0 ケーブル iPhone 17 / 16 / 15 /Xperia/Galaxy/LG/iPad Pro/MacBook その他 Android 等 USB-C機器対応 テレワーク リモート 在宅勤務 0.9m ホワイト
Anker USB Type C ケーブル PowerLine USB-C & USB-A 3.0 ケーブル iPhone 17 / 16 / 15 /Xperia/Galaxy/LG/iPad Pro/MacBook その他 Android 等 USB-C機器対応 テレワーク リモート 在宅勤務 0.9m ホワイト
¥660
4
KIOXIA(キオクシア)【日本製】USBフラッシュメモリ 32GB USB2.0 国内サポート正規品 KLU202A032GL
KIOXIA(キオクシア)【日本製】USBフラッシュメモリ 32GB USB2.0 国内サポート正規品 KLU202A032GL
¥1,080
5
【Amazon.co.jp限定】 ロジクール 静音 ワイヤレス トラックボール マウス M575SPd Bluetooth Logibolt 無線 windows mac iPad OS Chrome トラックボールマウス ブラック M575 M575SP 国内正規品 ※Amazon.co.jp限定 壁紙ダウンロード付き
【Amazon.co.jp限定】 ロジクール 静音 ワイヤレス トラックボール マウス M575SPd Bluetooth Logibolt 無線 windows mac iPad OS Chrome トラックボールマウス ブラック M575 M575SP 国内正規品 ※Amazon.co.jp限定 壁紙ダウンロード付き
¥5,680
6
エレコム 電源タップ 6個口 3m 雷ガード 個別スイッチ ほこりシャッター付 耐熱 PSE技術基準適合 ブラック T-K6A-2630BK
エレコム 電源タップ 6個口 3m 雷ガード 個別スイッチ ほこりシャッター付 耐熱 PSE技術基準適合 ブラック T-K6A-2630BK
¥1,590
7
Anker iPhone充電ケーブル PowerLine II ライトニングケーブル MFi認証 超高耐久 iPhone 14 / 14 Pro Max / 14 Plus / 13 / 13 Pro / 12 / 11 / X/XS/XR / 8 Plus 各種対応 (0.9m ホワイト)
Anker iPhone充電ケーブル PowerLine II ライトニングケーブル MFi認証 超高耐久 iPhone 14 / 14 Pro Max / 14 Plus / 13 / 13 Pro / 12 / 11 / X/XS/XR / 8 Plus 各種対応 (0.9m ホワイト)
¥990
8
KIOXIA(キオクシア)【日本製】SDカード 32GB SDHC UHS-I Class10 読出速度100MB/s 国内正規品 メーカー保証5年 KLNEA032G
KIOXIA(キオクシア)【日本製】SDカード 32GB SDHC UHS-I Class10 読出速度100MB/s 国内正規品 メーカー保証5年 KLNEA032G
¥1,061
9
NIMASO ガラスフィルム iPad 第11世代(A16) 2025用/iPad 10.9インチ 第10世代 2022用 衝撃吸収 強化 ガラス 保護フィルム 指紋防止 ガイド枠付き NTB22I574
NIMASO ガラスフィルム iPad 第11世代(A16) 2025用/iPad 10.9インチ 第10世代 2022用 衝撃吸収 強化 ガラス 保護フィルム 指紋防止 ガイド枠付き NTB22I574
¥1,359
10
【Amazon.co.jp限定】 ロジクール ワイヤレスマウス 無線 マウス M185CG 小型 電池寿命最大12ケ月 M185 グレー 国内正規品
【Amazon.co.jp限定】 ロジクール ワイヤレスマウス 無線 マウス M185CG 小型 電池寿命最大12ケ月 M185 グレー 国内正規品
¥999

Amazonのアソシエイトとして、ASCII.jpは適格販売により収入を得ています。

デジタル用語辞典

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