【Webデザインスクール体験談#25】TOPページ完成!クリエイターズファクトリー(CF)

Webデザインスクール体験談_クリエイターズファクトリー_CF_25

当サイトの記事には広告として、アフィリエイトプログラムが使用されています。
アフィリエイトによって得られた収益は、読者の皆様に還元するために当サイトの運営費に充てています。

当サイトの円滑な運営のため、読者の皆様にはご理解とご協力をよろしくお願いします。

今回は年内最後の授業。
チーム制作発表会を含めると残りの授業はあと2回。

下層1ページのデザインもほぼほぼ完成したので残り5ページ。
年末年始はスクールがお休みなのでその間にデザインはすべて片付けられるよう頑張りたい。

今週の授業内容
  • 下層ページFB対応

無料説明会参加で1万円割引

25回目の授業までにやったこと

チーム制作の下記デザインを対応しました。

・TOPページFB2回目
・TOPページFB2回目修正
・TOPページFB3回目
・TOPページFB3回目修正
・下層ページ初稿作成
・下層ページFB1回目
・下層ページFB1回目修正

講師からのFB2回目(TOPページ)

中間発表をしましたが再度FBをいただきました。
FBの内容がこちら。

よかった点

  • 統一感やインパクトが強くなった

アドバイス

  • メインビジュアルの枠線は透明じゃないほがいい。透明がメインだけなのが違和感があるのと文字が読みにくくなる
  • メインビジュアルの文字は日本語だけだと違和感がある。一部を英語にしたらどうか
  • 「Reason」のタイトルがむだに左にいってる感じなので真ん中揃えでも良さそう
  • 「安心して留学へ行くために」と「Reason」間の余白がちょっと多くて間伸びしている
  • 「Reason」にあるでっかい真四角が4つあるので1画面にはいりきらない。高さを圧縮したらどうか
  • 「Access」のタイトルがむだに右によっていて見にくいので中央揃えで良さそう
  • 「Access」と「News」のタイトルが内容に対してデカい少し小さめでもいい
  • CVの部分は蛍光色の青×オレンジなのでハレーションしてしまう。ボタンに白枠線を付けたらどうか
  • フッターの背景もCVと合わさってハレーション気味。鮮やかな色を使ったらその周りは無彩色にするのがおすすめ

TOPページFB2回目修正

指摘内容を修正し再度FBを受けます。
修正した内容がこちら。

TOP_FB1回目修正

講師からのFB3回目(TOPページ)

またまたFBをいただきました。
だいぶ指摘が減りました。

よかった点

  • コメントなし

アドバイス

  • 「Reason」の左右の白余白が妙に空いてる感じもする。ひとつひとつの写真を正方形ではなく横長長方形でもいいかも
  • 全体的にセクション間の余白を詰めたほうがにぎやかさと全体のバランスが整う

TOPページFB3回目修正

指摘を反映しTOPページはこの内容で完成にしました。

TOP_完成

下層ページ初稿作成

TOPページが完成したので続いて下層ページを作成します。
コーディング担当の方に早く渡さなければいけないので簡単そうなスペイン・中南米の魅力ページから対応します。

初稿がこちら。

スペイン・中南米の魅力_初稿

TOPのスペインの魅力、中南米の魅力の下層ページなので、TOPとあわせてナナメのレイアウトにしています。
本ページは留学に行ってみたいと思ってもらうための大事なページなので写真を多めにして掲載しています。

また、本サイトは旅行ではなく、留学なので一定期間住むことを考えると使用する写真は観光地だけでなく、どんなところで生活するのかをイメージしてもらうために市街地の写真も掲載しています。

ただ、タイトル部分(SpainとLatin America)がうるさいかなと思いつつもこの内容でFBをだしてみることに。

講師からのFB1回目(下層ページ)

やはりタイトル部分の指摘がありました。
FBの内容がこちら。

よかった点

  • 全体的にTOPとテイストもそろっている

アドバイス

  • ページタイトルもっと大きめでいい。倍くらい
  • ページ内リンクはもっと控えめにしてコンテンツに目がいくようにさせたほうがいい
  • タイトル部分(SpainとLatin America)はちょっと間伸びしてる感じもする。もうちょっと控えめに
  • 各地方のコンテンツがバラバラな感じがするので揃えると一体感がでる

下層ページFB1回目修正

指摘内容を修正し再度FBを受けます。
修正した内容がこちら。

スペイン・中南米の魅力_FB1回目修正

タイトル部分はだいぶスッキリさせました。
また、各地方のコンテンツは地名、文章、画像の位置をあわせました。

下層ページFB対応

下層ページのFBは授業内で対応しました。
FBの内容がこちら。

よかった点

  • コメントなし

アドバイス

  • リンク内ボタンをもう少し小さく
  • 各地方のコンテンツにある文章のフォントサイズはTOPとあわせる
  • 写真の説明文にザブトンを付ける。一部黒文字なのでコーディングがしにくい

次回の授業までに

下層の1ページはほぼ完成に近いのでコーディング担当全員がコーディングに取りかかれるようになりそう。
ほっと一安心。

完成までまだまだ先は長いですががんばろう。

無料説明会参加で1万円割引