## トップページの画像を作る
前回ポートフォリオのデザインルールを決め、それをもとに作成したCSSを適用してみました。
まだまだ改良は必要ですが、まずは第一歩ということで、引き続き作業を進めようと思います。
さて今回は、トップページに配置する画像を作成していきたいと思います。
前回、画像については以下のようにルールを決めました。
画像は「多用しない」ということで、トップページの上部に、どーんと一つ置きたいと思います。
## トップ画像のイメージを決める
このサイトのイメージは「流氷」なので、「流氷」の画像を使いたいところです。
後ほど迷わないように、まずコンセプトを固めたいと思います。
今回はエンジニアのサイトということで、
- エンジニア – 船
- 数々の難題 – 海+流氷
というイメージとしました。というわけで、これに合致する「海＋船＋流氷」の画像を探したいと思います。
## 画像を選ぶ
使用するサイトは、pixabayとしました。このサイトは、
- 商用利用：可
- 素材の加工：可
- クレジット表記：不要
ということで、将来的にブログを収益化したときにも問題を避けやすいことから、このサイトを選択しました。
早速、流氷で画像を検索していきます。その結果….検索結果内にイメージに完璧に合致する画像はありませんでした。
一応「海＋船＋流氷」の画像は ⇓ のようにありましたが、なんか違う感が….
今回はチーム開発ではなく、あくまで個人用ポートフォリオサイトなので、
１つの船に人がたくさん乗っているのはすこしニュアンスが違うように思います。なにか他にないか….
と思っていたら、「関連する無料の画像」の中に、ありました！
というわけで、この画像をもとにトップ画像をつくります。
## トップ画像をつくる
今回はclip studioを使用し加工します。トップ画像に含めたいのは
- このページの名称（askw portfolio）
- 船 ＋ 流氷
の情報です。またトップ画面に置くということで、横長の画像にします。
イメージは、左側に大きく船があって、右下にサイト名があるものです。そして作成したのが、下の画像です。
文字色は、白（#FFFFFF）に、本文の文字色（#374151）を組み合わせました。
## 画像をトップ画面に設定する
あとは、これをトップ画面に貼り付けて….
画像配置が完了。
サイトの背景とも違和感がなく、だいぶ見栄えが良くなったと思います。
今回は、トップ画像を配置する作業を行いました。今回の画像編集はシンプルに「画像の切り抜き＋文字配置」だったので、
次回以降はもっとエフェクトのような画像加工を行っていきたいと思います。
というわけで、今回の作業はここまでとします。
以下、作業ログ
今回の作業の目標
– トップページの画像を設定する
今回やったこと
– 画像のコンセプト決定
– Pixabayでの画像選定
– clip studio での画像編集
– トップ画像の設定
学んだこと
前回決めたルールによって、スムーズに画像のコンセプトの決定や選定を行うことができたと思う。
また今回はシンプルな画像編集だったので、次回以降はエフェクトのような画像加工を行っていきたいと考えています。
次にやること
– ページの見た目のブラッシュアップ