【ITニュース解説】Build a restaurant homepage with Webbit, a free Windows website editor

Webbitは、Windows環境でウェブサイトを視覚的に作成・編集するための無料アプリケーションだ。このツールの主な目的は、見たままのデザイン変更を可能にしながら、その裏側で標準的なHTML、CSS、JavaScriptといったウェブ開発の基本となるファイル構造を保持することにある。現在ベータ版として提供されており、特別なAIサービスや月額料金なしで利用できる。この記事では、Webbitを使ってレストランのホームページを構築する具体的な手順を通じて、このエディタの機能と使い方を解説している。なお、Webbit自体の開発とこの解説記事の作成にはAIの支援も利用されているが、示されているスクリーンショットや編集操作は、実際のWebbitエディタから得られたものだ。

ウェブサイト作成の最初のステップとして、既存のテンプレートを利用する。Webbitのメニューから「新しいサイト」を選び、「レストラン」カテゴリの中にある「レストラン＆カフェ」のテンプレートを選択する。この操作を行うと、「Juniper Table」という架空のレストランサイトが、一つのHTMLファイルと一つのCSSファイルとともにWebbitのエディタ画面に読み込まれる。このテンプレートには、一般的なレストランサイトに必要なメニュー、連絡先、営業時間といったセクションがあらかじめ用意されているため、ゼロからすべてを構築する手間を省き、すぐに編集作業に取りかかれる。ただし、このテンプレートはあくまでデザインの出発点であり、実際に機能する予約システムのような高度な機能は含まれていない点には留意する必要がある。

次に、ウェブサイトの印象を大きく左右するヘッドラインの変更方法を見てみよう。視覚的に表示されているページ上で、既存のヘッドライン部分をマウスで選択する。すると、Webbitの画面上部に、選択した要素に関連する操作項目が表示される「コンテキストリボン」が現れる。このリボンの中から「コンテンツ」を選び、「テキスト／ラベル」の値を「Fresh plates. Good company.」に変更する。この視覚的なテキスト変更を行うと、Webbitは自動的に、そのページのHTMLコードも新しいテキストに合わせて更新してくれる。もちろん、表示されているテキストを直接クリックして、その場で編集することも可能だ。このように、Webbitは視覚的な操作がどのように裏側のコードに影響を与えるかを実感しながらウェブサイトを作成できる点が、初心者にとって大きなメリットとなるだろう。

続けて、「Plan your visit」と書かれたボタンの見た目（スタイル）を変更する手順を説明する。このボタンを選択し、コンテキストリボンから「外観」の項目を選ぶ。ここでは、CSSプロパティを調整するための設定が表示される。まず、ボタンの背景色を変更するために、「background-color: #245b45;」というプロパティを適用する。これにより、ボタンの色が指定された緑色に変わる。次に、ボタンの角を丸くするために、「border-radius: 999px;」というプロパティを追加する。この値により、ボタンの角が大きく丸められ、両端が完全に円形に近い形状になる。これらのスタイル変更は、HTMLコードの中では、ボタンを定義する<a>タグのstyle属性として直接書き込まれる。具体的には、「<a class="button" href="#contact" style="background-color: rgb(36, 91, 69); border-radius: 999px;">Plan your visit</a>」のように記述される。このボタンは、クリックすると現在のページの連絡先セクションに移動するように設定されている。もし、実際に外部の予約サービスと連携させたい場合は、別途そのための設定やコードの実装が必要になる。

ウェブサイトの編集作業を進める中で、ページの表示状態やその基となるコードを定期的に確認することは非常に重要だ。Webbitでは、エディタ上部のリボンを非表示にすることで、編集中のウェブページをより広い領域で確認できる。また、「分割」機能を使うと、視覚的に表示されているウェブページと、そのページを構成するHTMLソースコードを左右に並べて表示できるため、視覚的な変更がコードにどのように反映されているかをリアルタイムで確認しながら作業できる。さらに、現代のウェブサイトではスマートフォンやタブレットなど、様々なデバイスからのアクセスが想定されるため、「電話」モードを選択することで、小さな画面サイズでウェブサイトがどのように表示されるか、いわゆるレスポンシブデザインのレイアウトを確認することが可能だ。これは、どの画面サイズでもユーザーが快適に利用できるよう、デザインを調整するために不可欠な機能である。

ウェブサイトを一般に公開する前には、いくつかの重要な確認事項がある。テンプレートに含まれているサンプル情報、例えば料理名、価格、住所、連絡先などは、必ず実際の店舗の情報に置き換える必要がある。また、ウェブサイトのアクセシビリティ、つまりより多くの人がウェブサイトを利用できるようにするための配慮も確認すべき重要な点だ。具体的には、キーボード操作だけでウェブサイト内を問題なく移動できるか（キーボードナビゲーション）、文字と背景の色のコントラストが十分で読みやすいか、そして様々な画面幅（デスクトップ、タブレット、スマートフォンなど）でレイアウトが崩れていないかなどを入念にチェックすることが求められる。Webbitのようなエディタに搭載されているデバイスプレビュー機能は、異なる画面幅でのレイアウトを確認する上で非常に便利だが、それは実際のウェブブラウザでのテストに完全に取って代わるものではない。Google Chrome、Mozilla Firefox、Microsoft Edgeなど、複数の異なる実際のブラウザでウェブサイトを閲覧し、すべての機能が意図した通りに動作し、正しく表示されるかを最終的に確認することが、高品質なウェブサイトを公開するためには不可欠となる。

Webbitは現在まだベータ版の段階にあり、さらなる機能改善や安定性の向上が続けられている。もしこのツールを使ったウェブサイト作成のワークフローを試してみて、再現性のあるバグを発見したり、今後のバージョンで追加してほしい機能や改善点について要望や提案があったりした場合は、積極的に開発者へフィードバックを送ることが推奨されている。システムエンジニアを目指す初心者にとって、このような視覚的エディタを使ってウェブサイトを構築する経験は、HTMLやCSSといったウェブ開発の基礎概念を実践的に学び、ウェブサイトがどのように構築され、デザインされていくかを体験する上で貴重な機会となるだろう。視覚的な操作とコードの関係を理解することは、将来のエンジニアリングのキャリアにおいて非常に役立つ経験となるはずだ。