課題プロフィールサイトに改修-デジハリ修了(9)

課題プロフィールサイトに改修

苦労しながらワークでWebサイトを完成させたら、ワークのWebサイトを自分のプロフィールサイトに改修する課題となります。このあたりは、私のようなWeb初学者だとけっこうスパルタ！　めげずに、がんばっていきましょう。

「改修」がキーポイント

※以降、私のようなWebデザインが初めての人向けに書いています。
以前の記事でも書きましたが、デザインカンプの課題で制作したプロフィールサイトをコーディングすることになります。

デジハリの資料でも「改修、カスタマイズしてください」となっています。キーポイントは「改修」です。新規に作成するわけではありません。
ワークで作成したWebサイトを、課題で作成したデザインカンプに合わせて変更していきます。
デザインカンプを作ったときのことを思い出しながら、どのような変更を入れていけば良いかを想像していきます。私の場合はというと――

構成する要素に追加変更が無いのでsectionやdivのclass名は変更しない
HTMLのタグの構成はほとんど変わりませんでした。なので、変更はほとんどテキストや画像の差し替えぐらいでした。
class名もあえて変更しなくても良いかなと思いました。

head内のmeta、titleを変更
課題のデザインカンプでは求められていないので、意外と見落としがちです。
自分のプロフィールサイトを作るので、サイトの概要やタイトルは自分用に変更しました。

全体的に色を変える
要素の背景色や文字の色を変えました。この際、HTMLの構成はほとんど変えていないので、CSSで色を設定しているところを変更していくだけでした。
カラーコードはPhotoshopのスポイトツールで取得できます。

ロゴを変える
Webサイトの名前を変えます。テキストなので入力し直すだけです。

テキストの内容を自分のものに変える
自分のプロフィールサイト用にテキストを変えます。テキストなので入力し直すだけです。デザインカンプからコピペでいきましょう。

写真を変える
トップ画像を含めて写真を差し替え。Photoshopからカンプ通りのサイズで書き出せます。
自分のプロフィールサイトなので、画像のファイル名は相応しい名前を付け直しました。
要素を変えていなければワークと同じファイル名でも動作しますが、サイトを改修する課題なので、ここはファイル名もきちんと管理しました。。

3段組を2段組に変える（レイアウトの修正）
ワークでは1列の3段組だったものを、課題では2列の2段組みにしたので、要素を加えたり横幅を変えたり。ここは、ちょっと工夫がいりました。

住所、地図を変更
住所はデザインカンプからコピペで対応できます。
地図は、GoogleマップからHTMLをコピペ。手順は動画を参照しましょう。

この程度の作業でした。ワークのWebサイトをひな形にして修正を加えていくので、基本的にはコピペでなんとかいけるのではないでしょうか。
ちなみにデジハリが推奨する作業時間は8時間となっています。そんなに簡単にできるかなあ……と不安になったりしました。

もちろん、せっかくの課題なのだからオリジナリティをガンガン発揮して、素晴らしいサイトを作るべきだと思います。
でも、私のような初心者の場合、「何をしたら良いか分からない」と思うので、まずはワークの動画の通りに手を動かして、色や画像を変えていくところからはじめて見るのはいかがでしょうか。

課題提出時の注意

課題を提出する際のフォルダ名や著作権関連の注意事項は、「課題概要」や「納品前のチェック」に記載されています。
それ以外にも、以下のような注意をトレーナーさんからいただきました。

CSSで画像のサイズを極端にリサイズしない
Adobe Stockの素材などで、印刷用途に使用するものは解像度が高く、画像サイズが大きいものがあります（横幅が4000ピクセルになるものとか）。
Webページで表示する際に、CSSでブラウザや表示領域に合わせて縮小表示もできます。しかし、極端に大きな画像サイズは、ファイル容量も大きく通信の無駄です。
なので、CSSで極端にリサイズするぐらいなら、ある程度、画像の大きさとファイル容量を減らしましょう。

私の場合、レスポンシブデザインを前提とするので、なかなかサイズを決めにくい＝とりあえずCSSで表示領域内に収めたい気分だったのですが。
でも、4000ピクセルの画像を800ピクセルに縮小表示は、現在のところWebページの実態にそぐわないそうです。
なので、ある程度サイズを決めてしまい、それに合わせて、Photoshopで画像サイズを変更しました。

じゃあ、「ある程度のサイズ」とは何なのか？　という話になるのですが。
ネット検索したり、トレーナーさんとの相談の上で「現時点では最大の横幅は1200ピクセル」としました。これが正解というよりも、まずは最大値の基準を決めてしまいました。
今後も端末の進化によって、ここは変わっていくと思います。

作業中のデータは納品しない
作業途中のデータ（PSD、AIとか）やバックアップ用に取っておいたデータなど、Webページでは使わないデータは納品用のフォルダから除外してください。
「どうせ課題だから」「あっても無くても動作に関係ない」と思いがちですが、悪いクセは思わぬところで出てしまいがちです。今からでも悪いクセは修正しておきたいです。

Webページができました

こうしてできた課題のサイトがこちらです。
（マップ以外のリンクは無効になっています）

ならあなたの伝えたいことをカタチにします「STUDIO A-COLOR」

先日、公開したSTUDIO A-COLORのサイトの原型となっています。
嬉し恥ずかし、自分で作ったWebサイトです。はじめて作ったものなので、いろいろとツッコミどころもたくさんありますが、何はともあれ形になりました。
まずは課題を提出できて、ホッと一息付けました。

Webサーバーをレンタル

※課題の提出方法は受講時期やスクールごとに異なる可能性があるので、必ずご確認ください。
デジハリでは、課題や卒業制作を公開するためのWebサーバーを無料でレンタルできるクーポンを発行しています。特に事情が無いのであれば、無料クーポンを使った方がお得だと思います。

私が受講したときは、さくらインターネットのスタンダードプランを1年間無料でレンタルできました（受講時期やスクールごとに異なる可能性があるので、必ずご確認ください）。
申し込み方法は、そんなに難しくはないと思いますが。受講時期によっては、配布されたドキュメントと実際の申し込み画面が微妙に異なることがあるので、そのあたりは適宜対応します。
無料期間は1年間なので、サーバーをレンタルしたら1年以内の卒業を目指しましょう。