ポートフォリオ：6月4日の復習

こんにちは、asuperuです。

ポートフォリオサイトの制作に向けて絶賛尽力しております。不慣れなせいも多々あり、育児で時間と体力の制限がある中での制作は、なかなか思うように進まず、時間がかかっています。

でも、一つ目のサイトvol.1が、ずいぶん形になってきました！そこからの微調整やブラッシュアップにいろいろと手がかかっています。先生からのあたたかいご指摘を、存分に反映したい所存です。

忘れないうちに覚書。

サイトvol.1

navの微調整

navのdorder幅が飛び出て、navががたつくのを調整

navのul/li要素のうち、一つをオンラインサイトへの誘導をわかりやすくするように、他と反転の色を指定していました。そこだけは、クリックした際に、枠線（border）を出す設定にしていたのですが、その枠線が表示されるときに、その幅分navが動いてしまったんです。

先生曰く、「枠線をつけるなら、全てのli要素に枠線をつけた方がベター。こだわりがないなら、色が変わる設定にしたほうが、対処が不要になる」とのことでした。デザイン上も、特にそこにこだわりはなかったので、色が変わる設定へ変更。

navのsnsアイコンを選択した際のサイズが他と揃わずがたつくのを調整

snsアイコンは画像（img）なので、他と設定をきちんとしないとその大きさが揃わずがたついてしまいます。モバイル時はハンバーガーメニューがうまく設定できていましたが、PC時がなかなか調整が難しかったです。

navがレスポンシブ時に左端のロゴにかぶっていくのを修正

logoの右横に置いたnavが、レスポンシブ時にロゴの上に乗っかってロゴが消えていくことが判明。気をつけていたつもりのレスポンシブの失敗がここで発覚しましたー。

先生からは、本来初めのうちに修正しておくべきところだとご指導いただきました。

navの文字サイズや、余白を調整しましたが、最終的にはブレイクポイントの設定を変更することで難を逃れました…　次回気をつけます。

モバイル時のnavのborder、項目によって線の長さが違うのを統一

ハンバーガーメニューのborderが、項目によって微妙に線の長さにばらつきがあったのを統一。

li要素のwidth: 100%にすることで解決。

footerのnavを無くす

footerにもnavを入れていたのですが、上部のnavを固定にしているので、無くしました。

htmlやcssを割と頑張ってかいたのに、消す時は一瞬なので、悲しくなりました…　事前のデザイン検討の甘さが、こういうところで露呈するんですね。ムダな作業を極力減らせるよう、デザイン検討は大事です。

footerのブランドアイコンを無くして、ロゴの横に

ヘッダーのロゴは文字だけで、ブランドアイコンをfooterに置いていたのですが、本来はロゴの横にあった方がいいというご指摘をいただきました。

background-imageにて、ロゴの余白を調整しながら配置し、footerのアイコンは消しました。配置、大変だったんだけどなぁ…　デザイン検討の甘さが、、、が繰り返しになってしまいますね。

positionの設定時に、”-“は入れてはいけません。

学習しました。配置がうまくいかず、「background-image: center right -30px;」とか記述していましたが、本来はしてはいけない指定方法のためNG。前も言われた気がします涙)))

mainの写真imgの上の文字が飛び出る

親要素に「overflow: hidden」を入れることで、子要素は親から飛び出さなくなるとのことなので、それで解決しました。

その他の微調整

項目ごとに、余白の幅や、装飾の線の幅など、細部の微調整をもろもろと反映しました。

おそらく、先生もある程度形になるまでは黙っていてくれたのだと思います。ある程度形になったからこそ、あえて指摘をしてくださったのだと信じております。

css冒頭に入れるhtml全体の設部分のimgに、「margin-bottom: 10px」として余白設定をしていました。このせいでギャラリーに余分な余白ができていました。

こういう設定は邪魔になるので、個々で設定すべき項目のようです。反省。

サイトvol.2

デザインがある程度完成したので、サイト制作を進めてhedder, footer, main部の骨組み+αくらいのレベルで、初見のフィードバックをいただきました。

ボタンの大きさや、表の線、余白の注意など、まずは目についたところをご指導いただきました。

ポートフォリオサイトとコンテンツの相談

他の卒業生の方々や一般のWebデザイナーの方のポートフォリオサイトをいろいろと拝見しました。なんとなくイメージが（ぼんやりと）できてきた気がします。まずは掲載したい項目などを目星をつけて、イメージに合うような構成や色味などを考えます。

また、あたしはすぐに就職するわけではないので、運営するコンテンツの骨組みを相談しました。

やりたいコンテンツは、「お酒」と「インドネシアの発信」サイト。他のサイトを研究しながら、ターゲット層や自分の目的に合うようなサイトを作れたらな、と考えています。

最後に

自分が作成しているときは、制作に夢中になっているので、こうやって第三者目線からのフィードバックはとても参考になります。

先月末で、動画の視聴期間が終わってしまったので、期間終了１週間ほどは動画の復習に明け暮れました。重要そうな部分の動画を受講しながら、各教程の振り返りをまとめたので、不足部分を補いながら整理してアップしたいと思います。

知識がある程度入った今だからこそ、授業を見て理解できるところもあるので、復習がもっと早くできていればよかったなぁと痛感しました。

それにしても、半年という受講期間はあっという間です。

受講前は長いかなぁと思いますが、その使い方は本当に人それぞれです。効率よく必要なところをきちんと身にしていかないと、「動画を見た」だけで「理解した気になる」満足感にしかなりません。

半年前の自分に言ってやりたい、、、と思っても仕方がなく、今はできることをやるしかないので、がんばります。