いよいよ中盤あたり。

さて、今週もポートフォリオサイトの途中経過をまとめていきます。
前回はサイトマップとか内容を決めました。

今週はこんなことを決めたり、進めたりしています。

【　トップページについて決めたこと　】
1.　サイト名
2.　トップページのデザイン
３.　CSSフレームワーク

1.　サイト名

SuhHa[スーハ]

こんな名前をつけてみました。
イメージは息を吸ったり吐いたりするような語感。

その人特有の空気って誰しもあると思うんです。
言い換えれば個性ということになると思うんですが。
その空気や個性をデザインやイラストにこめて表現したい、磨きたい、漂わせたい…ということが、ここ数年の個人的な目標だったりします。
イラストやデザインを見て、「これはきっと、あの人が作ったやつだ」とわかってもらえるような、個性を磨いていきたい。
そんな目標があるので、「空気」「雰囲気」ということをキーワードにしたサイトにしようと思い、こういった名前をつけました。

２.トップページのデザイン

おおまかなデザインが完成しました！
デモ的に、スクロールしてる風のgifアニメにしてみました。

スクロールして見れるようになると、いよいよ実感が湧いてきますね。
これにふわっと出現するような動きがつく予定です。

今回デザインする上で、特に気をつけたのは余白や字間。
「空気」ということをイメージすると、「漂う感じ」「ふわふわしたようなイメージ」があって、キツキツできっちり整列したような配置のデザインは違うな、と思ったんです。
なので、ゆったりとした配置になるようにしています。
あとは、透明感というか淡い感じ、をイメージして白を基調にしました。
色は仮に淡いイエローとグレーを使用していますが、これから作っていくうちに変えるかもしれません。

３.　CSSフレームワーク

ちなみに今回はCSSフレームワークを使うつもりです。
軽量で、気になっていたやつです。
なので、ブレークポイント等はそちらに合わせてコーディングをしていきますが、実はものすごく久しぶりのコーディングです。
過去にサイトを作ったことがあるとはいえ、普段の仕事ではコーディングはしないので、かなり時間がかかるかもしれない…
おおまかにデザインを作ったのは、コーディングしていく上で修正する部分も出てくるだろうなと思ったので、そうしています。
ちなみに使うのはこちら。シンプルで一目惚れです…！

Milligram - A minimalist CSS framework

以上、今週の進捗はこんな感じです。
やったことをまとめていくと、おお〜これだけやったんだ！と達成感がありますね。今週も時間を作って進めていけたらいいなぁ。

余談ですが、今回gifアニメを作るにあたって使用したソフトはこちらです。
フリーで、操作も簡単で、とても有り難かったのでリンク貼っておきますす…！

■LICEcap
https://www.cockos.com/licecap/