ごあいさつ

こんにちは。さしみです。

社内開発のプロジェクトで日々奮闘しています。

またまた活動報告をせよとのことなので第4回目の活動報告です。

第3回目の活動報告ブログはこちら。

画面デザイン

現在は開発フェーズが無事(？)に完了し、テストフェーズに入っています。

ブログのネタがないので今回はデザイン編をお届けしようと思います。・・・デザイン編でもネタはないのですが。

デザインを作成するにあたって、特にこういうデザインにしてくれなどの要望はなかったため（丸投げとも言う）

完全にセンスに委ねられることに・・・

というか、いつのまにかデザイン担当にさせられていた・・・（？！）

ブログに書くほどのものが見つからなかったので、とりあえずデザインの変遷でも載せておこうと思います。

※大人の事情で画面の一部を切り取っての紹介になります。ご了承ください。

①HTMLのみ（初期状態）

👇ボタン部分

👇一覧部分

②Bootstrapのみ（とりあえず版）

👇ボタン部分

👇一覧部分（①と変化なしです。）

③CSS＋Bootstrap（完成版）

👇ボタン部分

（ボタン名などが①②と若干変わっていますが、同じ画面です。察してください。）

👇一覧部分

こんな感じで、最終的にCSSとBootstrapの二刀流でデザインしました。

ほとんどCSSですが、必須ラベルなんかはBootstrapを使って1行でできたので組み合わせて使うことにしました。

（こういうの👉　　）

CSSに関しては初心者だったので基本はGoogle先生で色々調べて

よさそうなものをコピペ→画面に合うようにちょろっと変更したものが多いです。

（あまり大きな声では言えませんが😂検索力は大事ですね！！）

ボタンのアイコンはFont Awesomeを使用。アイコンつけると一気にそれっぽくなりますね。

デザインする上でまず色の系統を考えたのですが、コムコのイメージカラー？的な色が青なので

青で統一しよう！というわけでこの色合いになっています。

ただ、単色はまだ良いのですが複数の色を組み合わせるのが結構難しかったです。なんか違うな・・・の連続でした。

色彩検定ちょっととりたくなりました。

個人的に苦労したのは一覧部分でしょうか。

今回一覧はJQueryのライブラリを使用していて、もともとスタイルがある程度含まれているものでした。

なのでそれらを消しつつカスタマイズしていくわけですが、独自にクラス名がついていたりして、

そのクラス名を使わないとスタイルが適用されない場合もあり、発狂しそうになりました。

そんなわけでデザインもほぼ完成し、我ながらなかなかよさげなデザインにできたのでは・・・！？と思っています。

リリース日も近づいてきました。

これを書いているのは4/26でGW前ですが、残作業はあるものの気持ちよく連休を迎えられそうです。

終わりに

今回はデザイン編をお届けしました。あまり凝ったアニメーションとかはつけられなかったのですが、

CSSが意外と楽しかったので機会があれば挑戦したい所存。

だいぶ薄っぺらい内容になってしまいましたが、今回の社内開発報告はここまでにします。

最後まで読んでいただきありがとうございました。