Weebly のサイト制作実例から – スマイルジャパン 〜 アイスホッケー女子日本代表

3つ目のサイトは見栄えに拘る、特に写真を活かすことを意識して作成しています。

スマイルジャパン 〜 アイスホッケー女子日本代表」のポイントは、3つです。

  • ページヘッダーの写真
  • 横幅一杯に展開する背景のバリエーション
  • 項目をグループ化してカードを並べたようなレイアウト

このサイトは、「自分はアイスホッケーが好きで、アイスホッケーの情報が見たい」と IceHockeyStream.net 本サイトを定期的にアクセスして下さっている方々というよりは、「今テレビに出てるスマイルジャパンってなに?」「スマイルジャパンが話題になってるけど何なのか知りたい」など、これからスマイルジャパンやアイスホッケーに触れる方を想定して制作しています。

そのため、まずは「目を引く写真やデザイン」そして「興味が湧いたところだけ『つまみ見』できるレイアウト」を意識しました。

ページヘッダーの写真

パソコンのブラウザで横幅いっぱいに表示されます。ディスプレイに全画面表示しても画質を保てるよう、幅2048pxで画像を用意しています。

画像の上にヘッドライン/サブヘッドラインを配置しますが、垂直方向の配置位置を、「上・中央・下」から選択できます。さらに位置を調整したい場合は、「スペーサー」を挿入します。

写真の背景は氷面の白、スマイルジャパンのジャージも白だったので少し暗くして白文字を見やすくしています。

このサイト制作ではヘッダ画像に文字を乗せる、という作業を Weebly で行いましたが、よりデザイン性の高いものにしたかったら、Canva の出番です。

Canva で画像の明るさや色合い、効果などを設定し、ヘッドライン/サブヘッドラインなどのテキストを乗せた画像を作成してしまえば、Weebly ではそれを当てはめるだけです。

横幅一杯に展開する背景のバリエーション

ページを追加すると「セクション」が1つ設定されています。1ページを通して同じ背景を使うのであれば特に意識せず、そのまま1ページ1セクションで作成を進めていきます。

ある部分だけ背景色を付ける、画像を背景にする、などの場合にセクションを追加します。

「新しい」と表示されているように、まだ新しい機能なのでしょう(As of 2017/6)。余談ですが「New」をそのまま訳したと思われます。日本語化に日本人が携わってないんじゃないかと邪推してしまいます…

無料プランでは「セクション」の背景に色もしくは画像を指定できます。「2016-2017シーズン」ページ の冬季アジア大会のセクションには、画像を設定するとともにスクローリングエフェクトに「パララックス」を指定しています。

項目をグループ化してカードを並べたようなレイアウト

Weebly の標準コンポーネントには部分的な背景はありませんので、アプリ「Content Color Box」を使って「見出し」「本文」「引用文」「リンクボタン」をグループ化しています。

部分的な背景を提供するアプリにはいくつかあります。「Weeblyアプリを活用したアイスホッケーチームのWebサイト作成」の「ロースター」ページ で紹介しています。

Jimdo との比較

Jimdo では、2番目、3番目を実現しようとするとHTML/CSSの専門知識が必要になり、ここまで簡単にはできなかったと思います。

また、Weebly 全般的な仕様・機能で比較して気づいたを挙げてみると…

  • Weebly では1つのアカウントでログインして複数のWebサイトを制作できます。Jimdo ではWebサイト毎にログインが必要です。今回のように関連のある複数のWebサイトを並行して制作する場合には、Weebly の方が便利でした。
  • Weebly はアプリで拡張できる分、スキル的に幅広いユーザーを想定しているのかな、と思われました。Jimdo には「とにかく初心者に優しく」という基本ポリシーを感じます。
広告