kokeblog

ポートフォリオサイトを制作しました!

  • 2020年04月22日
  • 今回は、ポートフォリオサイトを制作したのでその紹介の記事を書いていきます。ポートフォリオサイト内でも紹介していますがここでも詳しく紹介していこうと思います。

    ポートフォリオサイトについて

    作品の概要

    サイト名は「koke portofolio」URL(https://koke05.com/portfolio

    自分の作品を掲載、紹介をする目的で制作しました。制作期間はデザイン2週間・コーディング2週間・Wordpress導入3週間です。使用ソフトはAdobe XD・VScode・MAMPです。使用した技術に関してはHTML・CSS・jQuery・WordPressです。

    工夫したところ・作品を通じて伝えたいこと

    私はUIやマイクロインタラクションなどを意識し、かっこいいやかわいいなどのヴィジュアル面のなかにユーザーが使いやすい、分かりやすいを実現できるWebデザイナーになっていきたいと考えています。自分のポートフォリオサイトなので先ほどのような自分が今、目指していることを伝えれる様に制作を進めていきました。しかし、作り始めた段階ではCSSアニメーションやJSなどの理解が乏しく、やりたいことができないことも多かったのでデザインを進めつつこのブログでもまとめていましたがCSSアニメーションやjQueryなどの学習を進めました。そのおかげで技術力はまだまだな部分は多い状態ですがなんとかやりたいことはできるようになりました。実際に実装するときにはアニメーションなどスムーズにできました。

    デザインについての概要も少しまとめておきます。白をベースにメインカラーは#2196F3を使用しました。自分自身の性格などを振り返ったときにどちらかというと静かめで冷静なところが多いかなと思ったのでそうゆうイメージを与えるために青を使用しました。フォントはWindows・Macでもきれいに表示される「遊ゴシック」を使用しました。読みやすさを優先したといった感じですね。

    伝えたいことを見ている人たちに伝えるために工夫したところは、ホバーしたときにただ色が変わったりするだけでなく、CSSアニメーションを使い徐々に色が変わったり下線が出てくるときにスライドして出てきたりして、ちょっとしたところのアニメーションの動きを意識してただ作品が見やすいだけでなく、実際に見ている人が退屈したり、分かりにくい、使いにくいと思わないように意識しました。個人的には、トップページの下のほうにあるアバウトページに飛ぶボタンのアニメーションはシンプルですが結構気に入っています。ただ作品について紹介しているページは、文字の量や画像も多くなるのでアニメーションさせると肝心の中身が見にくくなってしまうと考え、アニメーションなどはさせずに読みやすさを重視しました。アニメーションの使いどころも重要なので、鬱陶しくならないように考えながら実装していました。

    まとめ

    ポートフォリオサイトが一通り完成したので今回は紹介しました。とはいえCSSアニメーションなど細かいところばかり気にしてデザイナー志望なのにデザインがシンプルすぎてそこまでこだわりを感じてもらえないので、一度これは完成ということにして、さらに今回できたことを引き続き取り入れつつ、デザインに時間をかけていいものを新しく作っていこうと思います。現在、デザインを考えている段階なので、また完成したら今回のような感じでまとめていこうと思います。もちろん、ポートフォリオに掲載する作品も現在同時進行で制作しているのでまたできたらまとめの記事を出したいと思っています。ちなみにアプリのUIを制作しています。久しぶりに自分の作品についての記事を書いた気がしますが、自分の言葉で表現するのは難しいですけど楽しいものですね。

     

     

     

     

    Pocket

    関連記事

    古民家カフェのWebサイトデザインを終えて

    矯正歯科、こども歯科の名刺デザイン

    自分用の名刺デザインしました!

    オープンキャンパスのバナーデザイン

    カテゴリー