こんにちは、Yuriです。 アイキャッチの写真は、今朝、散歩中に見つけた咲き始めの紫陽花です。公園のバラは、見頃が終わりになってきましたが、紫陽花への見事なバトンタッチを見たような気持ちになりました。けれど、桜の木が可愛い赤い実をつけていたり、ローズヒップ（バラの実）が育っていたりと、私の思い入れに関わらず自然は一年を通して、どの瞬間も美しいのかもしれません。
話は変わりまして、「The start」という記事を書いたばかりなのですが、昨日ヒカルさんとの「Web学習を進めるZoom」は実は３回目を迎えました。
２回目の時に宿題を頂き、「大阪市内の制作会社をリストアップする」、「働きたい制作会社を探す（良いツールはTwitter）」の２つに取り組みました。
まず、私は今まで積極的に制作会社のWebサイトを見てこなかった為、一つ一つのサイトを見ていくだけでも発見がありました。企業理念、コンセプトはもちろん、得意分野をそれぞれ持たれていたり、実績紹介ではそれぞれの案件について制作の流れまで詳しく書かれていたりしました。
また、Webの知識を深めてくれるためのコラムを持ち情報発信されている制作会社が沢山ありました。そして、Twitterで情報発信をされている方からは、その会社をより身近に感じたり、深く知ることができました。
制作会社が実績紹介で掲載しているWebサイトのソースコードを見てみよう
ソースコードからその制作会社が、どのCSS設計手法（「OOCSS」「BEM」「SMACSS」）を採用しているか把握することができます。自分が目指す制作会社のCSS設計手法は学ぶべきと教えていただきました。
今回で、目指す制作会社が決まりました。私は自分のポートフォリオをまだ作成していないため、次回はそのテキストについて考えていくことになりました。
また、今回はヒカルさんがWebアプリのナビゲーションをAdobeのXdとIllustratorを使って制作する様子を見て学ばせていただきました。
ヒカルさんは、制作場面を見せてくれる前に、詳しく今から制作するものについて情報（制作の大きな流れも）を伝えてくれます。
言葉をお借りすると、ゴールと目的がわかっていないとデザインはできないためです。また、「実案件の空気感に触れておくと、現場に入って挫折する確率も減る」と考えてくださっているからです。
ありがたすぎて震えるほどですが、私の伝える技術を少しでもあげていって、教えていただいていることをシェアできるように頑張りたいと思います！
今回制作するWebアプリのナビゲーションには、「活動履歴」「活動報告」と似ている印象で同じ四文字のテキストがあります。そこで、２つの違いを伝わりやすくするため、左側にアイコンを設置することになりました。
まずAdobe Stockでアイコンを探します。今回のアプリには、ベタ塗りのアイコンが合いそうだったのでそちらを探しました。
ラインアイコンは線で、ベタ塗りのアイコンは面なので、ベタ塗りのアイコンの方が目立つ
しかし、ベタ塗りのアイコンが見当たらなかったので、ラインアイコンに決定となり、Illustratorに配置しました。
実際にXdにそのまま配置すると、線が細すぎるためIllustratorで１px太くします。またライアイコンは形がバラバラで整列の要素がないため、丸のラインで囲むことにより整列の要素を整えグルーピングします。
Xdに配置し、大きさをナビゲーションの文字とバランスが良いように調節します。色も、コントラストを考えて調節していきます。
まず、アイコンと文字を同じ色（朱色寄りの赤）にした場合、文字はアンチエイリアスのため若干明るく見えます。アイコンと文字の見え方を一緒にしたい場合は、文字の色をパレットで若干暗めにします。
アンチエイリアスとは、背景の色と輪郭の色の境目をグラデーションで色を補完して滑らかに変化させる表現方法のこと。画像に対して行なうと、ジャギー（ピクセルのギザギザ）が目立たなくなる。
今回は、視認性を良くするため、文字は黒にすることになりました。Xdの機能で、実際に携帯でどう見えるのか変更のたびに細かくチェックしていきます。
チェックすると、ナビゲーションの文字の上下余白が狭く詰まって見えたので、操作性を考えて幅を広げました。今回は、ここで時間一杯となり終了しました。
ヒカルさんから、この後の作業で、文字の横にボタン（例：▼）があった方がより操作性が良いので配置するが、一度決定したデザイン（アイコン、文字）を、バランスや相関関係を考えてこれから変更していく可能性があることを教わりました。
「一旦作ってみる → ピンとこない → 次の手を考える」という作業を繰り返し、経験則を身につけていく
制作物に対して根拠を述べること、言語化すること、ロジカルであること
ヒカルさんの客観性を持ちながらも夢中になって、集中力を持ってデザインに取り組む姿を見させていただき、私もこういう気持ちで制作や勉強に対して取り組めるようになりたいと強く感じます。
長文を読んでいただきありがとうございました！
