Weebly のサイト制作実例から – アイスホッケーの写真撮影

この投稿時点で Weebly で 3 つのWebサイトを制作しています。それぞれで気に留まったことをサイト別に挙げていきます。

Weebly でまず作成した Webサイトは、「アイスホッケーの写真撮影」でした。最初ということで「凝ったことはせず、シンプルにまずは 1 サイト作ってみる」を方針に進めました。

サイト・オープンさせてから手を加えて凝ってしまったところがありますが、そこはさておき、初めて Weebly に触れて特に気に留まったところを挙げてみます。

テンプレート(テーマ)の選択

サイトを作り始めるにはまずテンプレートを選ぶ必要があります。選択に際して重視したのは、メニューをサイドバーに縦方向に表示できることでした。メニューをサイトの目次代わりにも使いたかったのです。

ところが、Weebly のテンプレートでサイドバーを採用しているものは少なく、ほとんど選択の余地はありませんでした。

Weebly のテンプレートには非常にデザイン性が高いものが揃っています が、メニューを画面上部に横に展開するものが多いです。また、ビジネス向けのフォーマルな、くだけた言い方をすると「お堅い」「典型的によくある無難な」テンプレートは見当たりません。

作成するサイトの完成イメージや、メニュー階層を事前に固めた上でテンプレートを選択すると、評価のポイントが明確になってくると思います。

見出しの階層

Weebly では、画面上部のメニューから「ビルド」を選択し、配置したいコンポーネントをドラッグ&ドロップで配置して行くことで Webページを作成していきます。

テキスト項目は、「ベーシック」セクションの「タイトル」「テキスト」、「その他」セクションの「ブロック引用」しかありません。

多くのWebサイトビルダーでは、HTMLのh1〜h6タグからいくつかに対応して「大見出し」「中見出し」「小見出し」などに階層化したコンポーネントを提供しています。

ところが、Weebly は見出し用途に「タイトル」しか用意していません。

見出しを階層化するには、以下の手順でフォントサイズを変更したり、色を設定します。

  1. 「タイトル」コンポーネントをドラッグ&ドロップ
  2. 文字を入力
  3. 「フォントサイズを大きくする/小さくする」ボタンでサイズ変更
  4. 「色を変更する」ボタンを使って見出しの大きさや色を変更

こうして見出しを階層化すると、あとで「やっぱり大きさや色を変えたい」となった場合に面倒なことになります。対応する全てのタイトルを一つずつ変えていかなければならないからです。

この Weebly の見出しに関する仕様は、SEO(Search Engine Optimization, 検索エンジン最適化, Googleなどの検索エンジンにより良くサイト内容を理解してもらうこと)の観点からも疑問が残るものとなっていて、ユーザーフォーラムでも議論になっています。

このサイト制作に関しては、HTMLとCSSを使ってカスタマイズすることで対応しました。その内容については専門的になるので、別記事でご紹介 します。

ドラッグ&ドロップだけで柔軟に配置

コンポーネントのドラッグ&ドロップによりページを作成するWebサイトビルダーで作業すると、上から順々に項目を配置していくことが多いと思います。

「Body & Lenses – カメラ機材」ページ のように横に配置したい場合、Weebly ではドラッグ&ドロップだけで対応できます。コンポーネントの配置場所を示す水色の水平線に注意しながら、既存のコンポーネントの左や横にドラッグしていくと、水色の水平線が垂直線になります。それが、横に配置できるタイミングです。

Jimdo では、あらかじめ「カラム」コンポーネントを配置して横並べできる領域を作っておく必要があります。

広告