メインをリデザイン

Webサイトの中核を成すメインの編集では、冒頭で設計したように「自己紹介」、「ポートフォリオ」、「コンタクトフォーム」への入り口となるように改良を加えていく。写真を差し替え、見出しパーツの文言やその先のコンテンツへと誘導するための文言を書き換えるだけで、あっという間に作業が完了してしまうのは、さすが「BiND4」といったところ。そして、今回は盛り込みたい要素が3つなため、最上部のもののみ残し、下段のふたつのブロックを削除。簡単に削除や複製を作成できるので、後にコンテンツが追加された場合でも簡単に対処できるのが嬉しい限りだ。

Webサイトの中心に位置するメイン部分に手を加えていく。まず、余計なパーツを削除して必要なものだけ残し編集を行うことにした

初期設定の写真から自分が用意したものへ。この作業の流れも「BiND4」における制作工程で基本となる。写真のように、画像を拡大・縮小、回転させて思い通りのビジュアルを目指そう

自分が想い描いていたイメージが完成したなら、［ブロックエディタ］右下に表示されている［適用］をクリックしてデザインに反映させよう

如何でしょう?テンプレートの初期状態から、だいぶカスタマイズが進んだと思いませんか

フッタをリデザイン

いよいよ大詰め、今度はフッタを改良していこう。テンプレートを見たときに「このフッタのスペースにTwitterパーツを埋め込んでみてはどうか？」と閃いたので、［ブロックエディタ］であらかじめ入っていた要素を削除して、［ウェブサービス系パーツ］よりTwitterを選択。すると「SYNC」が起動し、ガイダンスに従って必要な情報を入力するだけで簡単に貼り付けることができた。が、サイズの調整に手こずった。ガイダンスの［オプションの設定］で任意のサイズに指定できるのだが、自動調整という便利な機能を発見し、チェックボックスにチェックして反映させてみたら、あらびっくり。自動的にリサイズされ、縦長のパーツになってしまった。なので、自動調整のチェックを外して何パターンか数値を入力して最終的なカタチに整形した。

フッタのこのエリアにTwitterパーツを埋め込んでみてはどうだろう?早速試してみた

あらかじめ用意されていた要素をすべて選択してカット。真っ新な状態へ

画面右にあるメニューから［ウェブサービス系パーツ］をクリックし、［Twitter］を選択

すると「SYNC」が起動し、パーツを生成するのに必要な情報を入力していく。Twitterパーツを利用する場合は、あらかじめTwitterアカウントを用意しておく必要があるぞ

アカウントやデザインを決定したらオプションを設定していく。［サイズ］の項目に［自動調整］というチェックボックスがあり、便利そうなのでチェックを入れてみたのだが……

パーツを保存して反映させてみたら、あらま。ご覧のように縦長のパーツになってしまった。なので、再度「SYNC」を起動してサイズ指定で煮詰めていくことにした

Twitterパーツが思い通りに配置できたら、最下部にあるコピーライトやメニューに手を入れよう。今回作成するWebサイトは基本的にサイドAのメニューを各ページで表示させるので初期状態のメニューを削除してコピーライトの文言のみ修正してみた。

Twitterパーツのサイズ調整もバッチリ、フッタのコピーライトも書き換えてトップページのリデザインは終了!

ブロックという概念のもとに改良を加えていく「BiND」ならではの制作スタイルは、非常にシンプルかつ直感的で誰でも迷うことなく操作することができるだろう。実際、筆者は制作面においては素人同然なのだが、僅か数時間でここまでのトップページができあがったのだから、いかに「BiND4」が扱い易いかおわかりいただけるのではないだろうか。

次回で最終的な完成形に仕上げます!

「BiND4」のWebサイトにある「開発秘話」を読むと、どれだけ本作に情熱を注ぎ込んだかがうかがい知れるはずだ

「Style」テンプレートが持っていたデザインの良さを活かし、自分なりにカスタマイズを加えたWebサイトのトップページを実際に作る。その過程をご覧いただいたわけだが、「BiND4」が如何にユーザーフレンドリーであるか、初心者にも理解しやすい作成手順であるか感じ取っていただけたのではないだろうか。

「BiND4」を中核として「SiGN」や「SYNC」、「SHiFT」といった各種機能を持つソフトウェアがシームレスに連携することによる快適さ、各種画像パーツを作成するために別のソフトを用意しなければならないといった準備や手間からの解放。そして、何よりも重要なポイントが"非常にカンタンでお手軽"であること。それでありながら、とことんこだわりたいユーザーにも手を加える余地を残している繊細なバランス感覚は、見事としか形容できない。実際に触れてみてそう感じたのは嘘偽りない気持ちだ。「デジタルステージの情熱、ここに極まれり!」といったところだろうか。

なお、現時点で完成しているトップページはコチラよりご覧いただけるようにしたので、ご参考までに。さて、次回は「自己紹介」、「ポートフォリオ」、「コンタクトフォーム」それぞれのページを仕上げ、最終的にすべてのページをアップロードしよう。また、「BiND Server」を用いることによって得られる"マルチデバイスへの自動変換機能"についても触れていくぞ。