概要

今回の制作物は、スクールの課題で仕上げたコーポレートサイトを想定したものになります。
今後、依頼される方が私に対して技術的にどの様な情報を入れる事ができるかイメージしやすいようにスクールで習得したスキルを載せています。

意識した点は3つ

• コーポレートサイトで必要になってくるカレンダー機能、アクセス情報、最新のお知らせ情報、値段設定を入れました。
• スマートフォン表示では、セクションごとにmarginを狭くしました。
• 色を多色せず統一感を出しました。

それでは各セクションごとに解説をしていきます。

header

• 右斜め上に上がっていく仕様にしました
• 常に上部に固定されているのでページ間のアクセスはしやすいです
• headerでリンクに飛ぶ文字についてはマウスを移動させると文字に下線が出るアニメーションを付けています。

top

• 画像にくすみをかけて伝えたいワードとお問い合せフォームの視認性を上げました。

blog
blog tile

• 1つのアイテムに画像、タグ、タイトル、本文、singlepageに移動するリンクを入れました
• 画像ではなくアイテム自体にホバーすると画像が拡大するアニメーションを付けました。
• 視認性向上の為、PC表示とスマートフォン表示で本文の行数を変えています。

more

• タイトルとmoreボタンの開始位置を揃えました。

price

• 視認性向上の為、PC表示とスマートフォン表示で上下のmarginを調整しています。

time

• 赤と青はグラデーションをつけて視認性を向上させています。

no border

• 強調する文字だけ色の変化とフォントサイズを変えています。

map

• google mapの埋め込みで周辺に何の建物があるか分かりやすくしています。
• google mapのリンクボタンを設置しました。

contact

• 入力欄の開始位置を揃えています。
• 必須項目には、ラベルを付与しています。
• プルダウンメニュー、ラジオボタン、チェックボックスの機能をつけました。
• チェックボックスのレ点はデフォルトのものではなくオリジナルのものに変更しました。