ポートフォリオ制作 第2回

ポートフォリオ制作 トップページ

今回はポートフォリオのトップページを完成させる。

背景動画透過の代償

前回、背景動画を透過させ色を入れる手法を試みたのだが、その後スマートフォンでのチェックを怠っていた。これをやると、IE8用に配置した背景が透過して見えてしまう。動画の色調を調整すればいいだけなのだが、何か対応手段がないか実験してみた。

試行錯誤の結果

結論から述べると、bodyに背景を入れ表示させることにした。まず昨日紹介したコードの、videoセレクタのbackgroundは除去した。max-width:639px以下のbodyに背景を入れ、ちょうどいい位置に配置させた。加えてmax-width:639px以下のvideoセレクタの透過を0にすることで、完全に背景を透けさせた。background-size:auto 20%で配置させた。

@media screen and (max-width:639px){
  #container{
    width:320px;
    margin:0px auto;
  }
  body{
    background:url(src/top.png) no-repeat;
    background-attachment:fixed;
    background-size:auto 20%;
  }
  #top video{
  opacity:0;
  filter: "alpha(opacity=0)";
  }
}

サムネイルhover時のアクション

サムネイルにhoverした際、画像を消し代わりにcssでtitleを表示させる。imgでサムネイルを配置するとcssが上手く効かない。試しにサムネイルをimgではなくbackgroundで配置してみると、画像が消えtitleが出る。本来サムネイルはimgで記述すべきだが、良い方法が見つかるまでこの手法で保留することとした。

サムネイルの色味を変える

トップページにサムネイルを配置した後、なんとなくマッチしない気がして色味を変えたいと思った。しかし画像を再作成するのは手間だったので、何か手はないかと実験をしてみる。試行錯誤してみると、サムネイル画像を背景に置き、,rgba()の第4引数で透過させると色味を変えられた。
コード変更のだけで操作ができる点は気軽だ。私のようにPhotoshop技術が未熟で、完成度の高いデザインカンプが作れないなら役立つこともあるだろう。ただし、サムネイル画像は通常、imgで配置するべき点に留意する。

感想

スケジュール管理の観点から、反省すべき点が2つある。ひとつは背景動画の対処に予想外の時間を使ってしまった。作業にかかる前はすぐに対処できるだろうと思って始めたが、実際には瞬く間に時間が過ぎ去っていた。面接が差し迫った状況で、かなりの痛手となった。
もう一つはデザイン面の見直しが入った点である。トップページが出来た時点で訓練生や講師の方々に意見を求めたところ、様々なアドバイスを寄せてもらった。中には修正必須な重要意見も頂戴し、こちらの対処にその日の大半を使ってしまった。
自分の強みのひとつに、良い意見を柔軟に取り入れ活かせる点がある。また、このようなアドバイスを気軽に得られるよう、日ごろから意思疎通を心掛けた結果、このような良い修正ができたと考えている。
この観点から特に反省すべきは、もっと早く意見をもらうべきだった、ということだ。実務ではもっと早めの相談を心掛け、修正工数を削減する意識を持ちたい。デザインは絶対的な正解はなく、その点の難しさを克服するためにも、こうした意見の集約によるブラッシュアップが大きな意味を持つと再確認できた。