近況報告：初転職、初デザイン
お久しぶりです。
前回ブログを書いてから早くも2ヶ月半が経過していました。
変わらず元気にやっています。
1月4日に今の会社に入社し、無事にUIデザイナーとして働き始めました。
初めての転職で、初めての仕事内容なので、変化は大きいのですが
意外と楽しくやれているかなと思います。
入社前の不安：業務内容のギャップ
UI・UXデザイン系の職種って、新しい領域ゆえに業務内容の定義が会社によってバラバラということもありがち…。
今の会社には、私自身はUIデザイナーとして入社したのですが、ほかに「UXデザイナー」と「プロジェクトマネージャー」を兼ねたような存在として「プロジェクトデザイナー」という職種もあり
「UIデザイナー」の職掌は実際どのような内容になるのかな？と少し不安に思っていました。
でも入社してみると、割と私が思い描いていた感じの仕事内容で、
- プロジェクトデザイナー → クライアントとの認識合わせ、クライアントのビジネス／業務理解、ユーザビリティテスト
- UIデザイナー → 業務理解、画面制作、クライアント説明
みたいな感じでした。
「プロジェクトデザイナー」⊃「UIデザイナー」
というか。
だいたい同じことをやりつつ、より具体的・細かい部分に注目するのがUIデザイナーという感じです。
クライアントのビジネス理解、業務理解も当然デザインする上で重要（というか最重要）ではあるのですが、そこに責任を持って精度高く行うのは「プロジェクトデザイナー」ということみたいです。
私の会社は受託でやっているので、事業会社の場合はまた業務の分担は変わってくるのかもしれません。
私としては、（今の会社の面接のときも話していたんですが）ビジネス理解、業務理解にも興味はありつつ…。
今はやっぱり自分の手を動かして、自分自身が「つくる」スキルを一定以上のレベルで持っていることが大事かなと思っているので。
しばらくはUIデザイナーとして頑張っていこうと思います。
UIデザイナーとしての業務内容
実際どんな業務をしているのかというと、今はOJTの最中ですが2個プロジェクトに入らせてもらっています。
1個は伴走型で、すでに2年以上続いているプロジェクト。
BtoBtoCのクライアントが持っている、小売店の棚卸を画像認識AIで管理するというようなサービスのフロントエンド（UI/UX含む）の開発・改善を請け負っています。
もう1個は2月から始まったばかりで、
オンプレミスの帳票管理システムをSaaS版として売り出すにあたりデザインを刷新するというようなプロジェクトです。
基本的に1個目のプロジェクトは軽微な修正・改善をひたすら続けていくというもの（いわゆる「アジャイル」的な）なので、そんなに大きなタスクはまだないです。
2個目のほうが納期が明確にあるので大変です。
しかも既存サービスの理解がすごく難しく…。オンプレミスなので「ユーザーによって使い方が全然違う」ということがあったりするみたいなので、一概に「ここをこうすればいいんじゃない！？」みたいな提案がしづらいんですよね。。
大変ではありますが、面白みはすごく感じています。
「エキスパートレビュー」と呼ばれる既存のサービスの分析レポートのまとめ作業を担当してクライアントに好評をもらったりしました。
今はテーブル（表）のUIを担当していて、テーブルUIについてあれこれ調べまくっています。
楽しいポイント
基本的にデザイナー4人ぐらいで１プロジェクトに入るので、チーム作業が大前提ではあるんですが
振り分けられたタスクは基本的に1人で行います。
ひたすら頭を絞って手を動かす→リーダー的な人からレビューを受ける→修正してまたレビューしてもらう
という感じ。
この「ひたすら頭を絞って手を動かす」のフェーズが楽しいです。
ああでもない、こうでもない、とやってるうちに、「あ、こうすればいいのか！？」みたいなひらめきを感じたり。
かと思ったらレビューで、最初のほうにとりあえずで考えてみた案が一番いいと言われたり。
自分のアイデアとアウトプットが明確で、自分で責任が持てる感じが好きだなぁと思います。
そして、自分のアイデアが他の人の視点からブラッシュアップされていくのも嬉しいし。
やっぱり、アイデアベースで何かを生み出していくことが好きなんだと実感します。
アイデアベースとは言ってももちろん、理論やロジックが土台にあることは大前提です。
複雑な情報を構造化して整理して、そのうえでそれをどう表現するか？っていうのを考えるのがワクワクします…！！
そのためにはたくさん表現の手段や理論（どのような場合にどのような表現を使うのが最適か、など）を知っておかなければならないので、いろいろな記事を読み漁ってます。
英語のほうが圧倒的に情報量が多いので、頑張って英語スラスラ読めるようになりたいな…。
今の時代は精度高い翻訳アプリケーションが色々あるので、それで十分かもしれませんが。
でも自分で読んでいったほうが頭に入るとは思うんですよね。細かいニュアンスとかもわかるし。
落ち着いてきたら英語の勉強も頑張りたいなぁ。会話力をつけたいのでTOFELとか受けてみようか、とぼんやり考えています。
初転職について
転職というものも人生初でした。
転職が普通の時代になってきているとは感じますが、それでもやっぱり緊張します。
しかも意外と今の会社は新卒入社の方が多くて（デザインチームのメンバーの約半分）、同期どうし仲が良さそうなのをみていると、少し疎外感を感じないと言ったら嘘になります。。
新卒入社の方も多く、全体的に20代の若いメンバー中心のためか、割とワイワイとした雰囲気でもあります。
年齢的には部内で真ん中ぐらいだけど、未経験で、だけど妙に高学歴（社員名簿に学歴を書く欄があるので。。）というちょっと微妙な立ち位置？にある？？
いや、絶対私が勝手に想像して自分でやりづらくしてるだけなんですけど…。
みなさんすごく親切で優しくしてくださるんですけど、めっちゃ打ち解けてギャグとか言いまくれるような環境ではないです。
まぁまだ入社1ヶ月半なので当然か。
でももうちょっと素が出せるようになるといいなと思います。
頑張れ自分！
ちなみにデザインチーム以外の会社の雰囲気は、前の会社もベンチャーだったということもあり、意外と近しい気がしています。
でも前の会社のほうがもっと「ミッション！ビジョン！バリュー！」という感じだったので、今の会社は思想面ではだいぶ自由度が高いです。
今後のこと
今後、このブログはどうしていこうか迷っています。
学びの記録をつけるっていうのはすごく大事なことだと思うんですが…。
（もしかしたらまた転職を考えるようにもなるかもしれないし、採用対策的な意味を含めても。）
やっぱりnoteのほうが人に見てもらえる感じはするんですよねぇ。
そのほうがモチベになるのかなー。
はてなブログの、インターネットの深海的な雰囲気も好きなんですけどね。
こっちは若干愚痴？とか心情を中心の記録にして、noteには純粋な学び関連の記事を載せる…とか棲み分けてみようかな。
このブログ１本ですら更新が絶え絶えなのに２本も並行してできるでしょうか…。
不安しかありませんが、目標を掲げるのは大事だと思うので、2月中にnote開設してみます。
リンク貼るのでぜひそちらもご覧いただけると嬉しいです。
1ヶ月に1本ずつぐらいは記事載せたいなー。
文章書くことは全然好きで苦じゃないのに、なぜこんなに腰が重いんでしょう…。
やっぱり仕事してると、自分の時間は全部自分のためだけ（の非生産的な活動）に使いたくなってしまうのかなぁ。
いやいや。生産的な人間として生きていきたいので、1ヶ月に1日ぐらいは休日を「ブログを書く日」として押さえられるようにします。
有言実行！頑張るぞ！
それでは近いうちにまた。
近況：就活を終えて考えていること
お久しぶりです。
もう11月も終わりですね。
10月も1件もブログを書けずでした。
ただ、10月の第１週から本格的に就活を始めた（応募書類を各社に送付し始めた）ので、10月〜11月は本当に鬱々していたというか、とてもブログを書くような心のゆとりがなかったのです。
そしてその就活は先々週ぐらいに終わりを迎えました。
最終的には2社から内定をいただき（＋1社、初回の面接でいきなり取締役が対応してくださり口頭のみで内々定をいただいた）、オファー面談を経て熟考したのち、先週1社に絞ってお返事をしたという感じです。
スケジュールを振り返ると、
- 自主制作の作品に取り組み始めたのが8月はじめぐらい。
- ポートフォリオをつくりはじめたのが8月終わりごろ。
- 応募書類の準備をし始めたのがを9月頭。並行して応募する企業もリストアップし始める。
- 学校の授業が終わったのが9月半ば。
- 9月後半から、自主制作した作品やポートフォリオにフィードバックをもらいブラッシュアップする。
こうして考えるとかなり慌ただしいですね。（もうあまり覚えていない）
まあ、全部自分都合で、納期があるものでもないので、気持ち的にはそんなに切羽詰まってはいませんでした。
でも、「できれば9月後半から、遅くとも10月からは求人に応募し始める！」と思っていたので、フィードバックを受けて作品を改善するときも「10月までにできる範囲で改善する」とは決めていました。
結局、あれもこれもと盛り込んでしまい、実際に企業に応募し始めたのは10月第１週の終わり頃ぐらいにはなりましたが。
応募についてですが、会社の規模とか業態（事業会社or受託会社など）に応じて、受験企業の自分にとっての難易度を「相応」＋「挑戦」＋「たぶん無理」の３段階・各５社ぐらいに分けて、合計15社に書類を送りました。
で、書類を通過したのが5社。うち、1次面接（カジュアル面談という形のものもありました）を通過したのが3社。
そこから実技試験があったり適性検査（Webテスト）があったり、社長・役員面接があったり、選考過程は会社によって多少変わりましたが、ありがたいことに３社とも内定をいただきました。
余談ですが内定をいただいた3社はすべて事前に「相応」に分類していた企業でした。私の難易度判定は割と正確だったということです。笑
もちろん相応というのはけっして悪い意味ではないです。
これから成長していく、可能性に溢れた企業だからこそ、未経験中途という低コスパ人材も投資として採用してもらえるわけですし。そういった企業で組織と一緒に自分も成長していけるのはすごく楽しみなことです。
ただ、10社から続々とお見送りメールが届いていた1~2週間ぐらいの時期は非常に気が滅入りました。
まぁ未経験だしな…いつかビッグになって見返してやるんだから！なんて自分を励ましていました。
そして、そこからさらに「面接に進ませてもらった企業」からのお見送りというのもなかなか堪えるものがありました。
会って話したうえで「ナシ」と判断されたんだな〜と思うとショックがでかいです。
書類を通過してる時点で条件はある程度満たしているということなので、その上で人格とか能力に欠陥を見出されたのかな〜とか考えてしまいました。
（1社カジュアル面談をした企業は、応募して1時間以内に面談の案内をされたのでそもそも書類を読まれていなかった可能性もあります。）
そしてそして、面接に合格して次の選考ステップに進ませてもらえることに対しても非常にストレスがかかりました。
合格して嬉しい反面、「せっかく通ったのに次の選考で落ちたらどうしよう」という思考になってしまうのです。
失う怖さ…というんでしょうか。（まだ得てもないはずなんですが）
このストレスは最終面接を終えて内定の連絡をもらう日まで続きます。
最後に、これは嬉しさもありつつですが、複数いただいた内定から1つを選ぶのも憂鬱な行為でした。
こんな私を一緒に働く仲間として受け入れてくれたことがありがたいし、しかも私も選考中は基本的に「御社に入りたいです！」という雰囲気を満々にしてコミュニケーションしていたので…。
申し訳なさ、後ろめたさがMAXです。
こんな感じで、本格的な就職活動自体は約1.5〜2ヶ月で終了したのですが、はじめから終わりまで非常に心臓に悪い日々でした。
特に私は無職の状態で就活をしていたので、「どこも受からんかったらどうしよう」という不安でストレスが割増されていたように思います。
もちろん、無職だからこそ時間の融通が利きやすくて就活をしやすいというメリットもありましたが。
（ホワイトな会社ほど面接日時が10:00-19:00内とかで設定されているので、働いている人は倫理的にどうやって面接してるんだろうと思いました。就業中にこっそり受けるしかないじゃん。しょうがないのか…）
しかし終わりよければすべてよし、ということで、今は朗らかな気分です。
来年の1月から入社なので、それまでに自分のスキルを少しでも高めつつ、しばらく会えていなかった友達に会ったり、早めに帰省して家族に感謝を伝えたいなと思っています。
とりあえず年内にやることを宣言しておきます。
- デザイン関連の本を読む
- 『動機のデザイン』←2章まで読み終わった
- 『BUILD』
- 『人間中心設計入門』
- アプリのUIトレース・UX分析
- UberEats 対 出前館 とか
- BONOの動画を見て学習
- 「デザイナー1年目の立ち回り」系一式
- Figma解説動画（少なくともオートレイアウト使いこなせるようになる！）
就活の反動で11月後半はダラダラ過ごしてきてしまったので、12月からまた気合い入れます。
学校の自習室にも通おうっと。
そして人生で平日ヒマな期間はもう残り少ないと思うので、休日だと行列のパン屋さんなんかにも合間合間で行っておこうと思います。
いやー、よかった。
やっとスタートラインに立てたということなので、気を引き締めて、でもポジティブに、頑張っていこうと思います。
近況や読んだ本など
お久しぶりになってしまいました。
8月、1件も記事書いてなかったですね…
最近は、学校やBONOで学んだことを活かして自分でゼロからサービスを企画・デザインしてみたり、
これまでにやってきたことをポートフォリオにまとめたり、
自分の人生を振り返って自己分析したりと、
それなりに忙しく過ごしておりました。
忙しくはあったんですが、作品づくりもポートフォリオも自己分析も全部「自分」のためにやっているものなので、なんだか出口がない、実体が感じられないというか…。
私が諦めた瞬間に全部が無価値になる儚さ、脆さみたいなものを感じていました。
誰にも何も強制されなくて気も遣わなくて、楽なはずなのになんだか苦しかったです。
今はだいぶ作品づくりもポートフォリオも終わりが見えてきたというか、無理やり終わりを決めるに至ったという感じです。
でも、自己分析。コイツだけは終わりがないですね。
考えても考えても、考えるたびにちょっと違う角度の答えが出てくる気がします。
自分は将来何がしたいのかとか。なぜあのとき、この選択をしたのかとか。
正直、そのときの気分とか直近考えたことに影響されてどんどんアップデートされていく、実体のないものだと思います。
でも考え続けるしかないですし、考え続けて出てきたものの中からベストなものを選んで進むしかないんですよねぇ。
就職活動ってなんだか不思議です。
馬鹿馬鹿しいなぁと思うときもあるし、人生におけるシンボリックな瞬間なのかなと思うときもあります。
最近考えているのはそんなことです。
お察しの通り就活の準備に追われていて、手を動かしてデザインすることからちょっと離れてしまっています。
よくない。
今、ゼロからつくってみたサービスへの改善アドバイスを実際のデザイナーの方からいただいていて、今週後半はその実践に取り組もうと思っているので、がんばります。
（このサービスをつくるときも、「やりたいことはあるのにどういう画面にすればいい感じに見せられるのかわからない」と悩むことが多かったので、もっと数をこなしてデザインの引き出しを増やさないといけないです…）
ポートフォリオは個人情報が気になるのでブログには載せないと思いますが、サービスの方が完成したら公開したいと思います！
一応タイトルに入れてるので最近読んだ本についてもちょっと書いておきます。
相変わらず図書館に通っていろんな本を読んでいます。
デザイン関連だと『世界ピクト図鑑』という本を読みました。
昔、中学生？ぐらいのときに『ピクトさんの本』という本を本屋で見つけて買って、めっちゃ笑いながら読んでいたことを思い出して、なんとなく縁を感じました。
『世界ピクト図鑑』も、世界各国のピクトグラムについて冷静に観察しているようで、ちょっとユーモアのあるような文体で書かれていたんです。
ピクトってなんだかユーモラス、人をクスッとさせるような存在なのかなと思いました。
（よく見たら著者の方、私と出身地が同じで、また謎の縁を感じました）
あとは、前回読みかけだった『リーン・スタートアップ』を読み終えたぐらいでしょうか。
この前海外のUXデザイナーの方のYouTubeを見ていたら、「テック業界の動きの速さ」を説明するときにこの本の話が出てきたので、やっぱり象徴的な本なんだなぁと実感しました。
具体例が豊富でわかりやすかったですし、日本語訳も結構よかったと思います。
この本でいうところの「リーン生産方式」がトヨタ発祥だというのはなんだか不思議でした。
10年以上前に出版された本なので、10年間でトヨタに対する印象がどれくらい変わったのかなぁ…なんてことに思いを馳せてみたり、みなかったり。
日本、まだまだ盛り上げていきたいですね。
とても雑談的な日記になりましたが、そんな感じで引き続き頑張っております。
根詰め過ぎず、頑張ります！
最近読んだ本（『誰のためのデザイン？』『リーン・スタートアップ』『オブジェクト指向UIデザイン』）
今日は、最近読んだデザイン関連の本について、簡単に感想をまとめてみたいと思います！
①『誰のためのデザイン？』
つい先日、『誰のためのデザイン？』を読み終わりました。
実は学生時代にも、大学図書館で借りたことがあった本です。
たしかそのときは、私にとって「デザイン＝グラフィックデザイン」のイメージが強かったため、プロダクトデザイン・システムデザイン的な話がメインであることに面食らった記憶があります。
UIやUXの勉強をしている今になって読んでみると、あらためて発見があり面白かったです。
特に、ユーザーが抱いている「メンタルモデル」（文中では「概念モデル」）を前提にデザインするべきという話が、事例を挙げて細かく解説されていて、深く理解できました。
例えば、
- フロア全体の照明をまとめてON / OFFするスイッチ。
- 右、左、奥3つのガスコンロの操作をする、一列に並んだつまみ。
- 温度と水量をひとつのバーで調整するトイレの蛇口。
などなど、「どのパネルがどの部分の操作に対応しているかわからない」問題を解決するのが、ユーザーのメンタルモデルを理解することだという解説がありました。
終始こんな感じで、具体例を挙げて説明が進むので読みやすかったです。
（ただ増補改訂もされてて、全体的なボリュームはすごい。）
②『リーン・スタートアップ』
デザインに直接関係する本ではないんですが、昨年Amazonでおすすめされて買ってみた本です。
まだ2/3ほど読み進めたところなんですが、『誰のためのデザイン？』のビジネスに関する章と共通する内容も多くて、面白いなと思いました。
いいプロダクトをつくるためには、ウォーターフォール開発（決まりきったところまで進めてから次のフローに移る開発形式）ではなくアジャイル開発（工程を引き返したり、柔軟に進める開発形式）で、各部門を横断してチームメンバーを構成すべき、といった話などです。
また、「とにかく最小限の機能の製品をつくってみて、ユーザーの反応を問うて、改善をどんどん行っていくべし」…という主張も、デザインのやり方とよく似ているなーと思いました。
よく考えたら、スタートアップがやっていることってそもそも「新規プロダクト／サービスのデザイン」なので、デザインの手法に似ているのも当然とも言えます。
文中で直接的にデザインについて言及されることは（今のところ）なかったですが、なんとなく「あ〜、D.A.ノーマンさんも言ってたやつだ」みたいな感じでリンクすることが多く、読んでいて楽しいです。
③『オブジェクト指向UIデザイン』
解説動画を見て簡単に内容は理解していた概念でしたが、オリジナルアプリを設計するにあたりあらためてちゃんと読んでみようと思い、図書館で借りてみました。
ものすごく学びが多かったので、詳しい内容はまた別にまとめられたらと思うんですが、OOUIの重要性に関する解説の部分でとても印象的な内容がありました。
…問題を解決するには、業務自体をオブジェクト指向のシステムに合わせてより創造的な方向に変えていかなければなりません。既存業務のネイチャーに合わせてシステムを作るのではなく、デジタルのネイチャーに合わせて業務を作るということ。仕事がソフトウェアを作るのではなく、ソフトウェアが仕事を作るのだと考えること。
このような発想はデジタルトランスフォーメーションと呼ばれ、企業や社会がテクノロジーを本質的に利用することによりこれまでの事業のあり方が根底から変化し始めていると言われています。
デザイン領域の多くで、「機械・システム中心」から「人間中心」にシフトすることが大事だと言われている中、「デジタルのネイチャーに合わせて業務を作る」「ソフトウェアが仕事を作る」という表現が、コンテキストに反しているように思えたのです。
ただ一方で、読み進めていくと、機械やシステムを「オブジェクト指向」にデザインすることで、「人間がより自由に柔軟にタスクを達成できるようになる」、つまり「人間中心的に業務を進められる」ということなのだなと。
オブジェクト指向は、これまで「機械」に合わせることが前提になっていた業務を、「人間」がやりやすい形になるよう機械ごと変えていこうという思想なのだと理解しました。
＊
最近、「あ、あの本にも書いてあった」「あの本に書いてあったこととこうつながるのか〜」みたいな発見や納得が増えて、理解が深まっていることを感じられて楽しいです。
もともと私は好奇心旺盛な分飽きっぽくて、広く浅くになりがちでしたが、深く（といえるほどではまだないですが）知れば知るほど、見える世界があるのだなぁと学べました。
まだまだ読みたい本があるので、就活や課題の合間に頑張って読んでいきます！
デザインスキルについて、先生からの講評
今日も暑いですねえ。
最近は、できる限り外を歩くのは日没以降にするようにして、日差しから身を守っています。
本当にそういう行動変容が必要なレベルの、災害級の暑さですね。
さて本日は、私のデザインの傾向や強みについて先生に好評をいただきましたので、それを載せようと思います。
先月末にグラフィックデザインの授業が一足先に終了したのですが、最終日に先生が生徒ひとりずつに対し、制作物の全体的な講評をまとめた資料を配布してくださいました。
私がいただいたのはこれ↓です。
「可愛さと毒」「無機的と有機的」はたぶん、音楽配信サービスのファーストビューをデザインするという課題の提出物のことをおっしゃってくださってるんだと思います。
「賢さと幼さ」は先日の、弁護士事務所のロゴのことかと。
「相反する要素を融合させて魅力的に見せる能力」、、
そんなふうに思ったこと一度もなかったので、驚きましたが嬉しかったです。
意識的に「相反する要素を取り入れるぞー！」とか思ってつくったわけではないですが
「かわいくなりすぎるかな？」「落ち着きすぎていないかな？」などなど、全体的な印象のバランスを調整するのはいつも時間をかけている気がします。
それが私の良さ、強みだと言語化してもらえたことはとても自信になりました。
（深読みしすぎかもしれませんが、造形力がそんなに高くない分を、構成力や調整力でカバーしてるっていうのが私のデザインスタイルだよな…とあらためて実感するきっかけにもなりました）
今後の課題として、勢いや躍動感のあるスタイルもデザインできるようになってほしいとのこと、、
おっしゃる通りで、自分でもその課題意識があって上述の「可愛さと毒」な感じのポップなロゴデザインにも挑戦してみたりしたんですが、足りなかったようです。
単純に自分の好みがどうしても、落ち着いていたりシンプルで洗練されているようなデザインなので、なかなか腰が重いんですよねえ…。
といいつつ、勢いや躍動感をテーマにしたデザインも今後挑戦していきたいなと思います。
5月ごろから止まってしまっているバナートレース、再開できたら躍動感のあるバナーを題材に選びたいと思います！
法律事務所のWebサイトをデザイン（課題）
こんにちは！毎日暑いですね。
最近、12時〜14時の間に屋外に30分以上いると、その後1日の身体機能が20%ぐらい低下する気がしてます。
日常的にあまり水を飲む習慣がないので、脱水気味になっているのかなぁ…
今夏はこまめに水を飲むよう心がけたいと思います。
＊
さて、7月に入り、4月から始まった学校生活も後半に突入しています。
実は、Webグラフィックの授業は一足先に6月末で終了してしまいました。
今日は、その最終課題として提出した「実在する法律事務所のWebサイトデザイン」についてまとめます。
デザインしたWebサイトについて
父が地元・岡山で営んでいる法律事務所のWebサイトを、一応許可を取ってつくらせてもらうことになりました。
個人事務所で規模こそ大きくありませんが、35年前に開所して以来、地域の人々や企業に寄り添い続けてきた法律事務所です。
現在もWebサイトはあるのですが、父曰く「名刺代わりに必要最低限の内容しか載せていない」とのこと。
（実際のサイトURLを載せたいのですが、個人情報的な部分がちょっと気になるのでここでは掲載を控えます。代わりに、ぼかしまくったキャプチャ画像をどうぞ）
文字中心で、メッセージと弁護士紹介、アクセス、採用情報など、たしかに必要最低限の内容のみが記載されたシンプルなホームページです。
父たち（2人の弁護士の共同事務所です）はインターネットがこんなに盛んになる前、そして弁護士が今よりも希少な存在だった頃から弁護士をしていたので、インターネットで集客などをする必要がなかったということですね。
今のWebサイトも味があって私は好きなのですが、
「今のテイストを生かしつつ、より見やすく、そして初見（新規）の人も気軽に相談しやすい雰囲気を少しプラスできたら」
という思いのもとに制作を開始しました。
制作物
ロゴ
まずはロゴの制作から取り掛かりました。
こちらも個人名が出てしまう関係で、ロゴの一部だけお見せしたいと思います。
ふたりの弁護士の名前にどちらも「木」が入っていることから、モチーフを木にしようと思ったんです。
さらに、木を2つ並べ重ね合わせることで、「2人の弁護士が力を合わせる様子」、「依頼者さんと弁護士が同じ立場に並んで問題に取り組む様子」を表現しました。
ちなみに、木の部分の輪郭は「M」、影の部分は「O」を表していて、苗字のイニシャルにもなっているという遊びを入れています。
文字は平成丸ゴシックをもとに、視認性が高くなるよう字体の一部を単純化しました。
プレゼンで、先生からは、
「賢さがありつつ優しい柔らかい印象のロゴ。一歩間違えると幼稚園のロゴのようにもなりそうなところを、色数を絞ったり色の彩度を落とすことで、法律事務所にふさわしい落ち着きを生み出している」
と評価いただきました。
Webサイト
個人情報を加工するのが大変なので、トップページだけお見せします。
（いずれポートフォリオサイトなどを公開する際には、全部見ていただけるようにしたいと思います。）
スマートフォン版もつくっています。それぞれのトップページだけお見せするとこんな感じです。
コンテンツはほぼ現在のWebサイトのままです。
画像素材は、プロフィール写真や事務所の外観・内観は現在のWebサイトから引き継いでいますが
イメージ的な写真もデザイン上は少し必要だったので、仮でフリー素材サイトから借りました。
現在のWebサイトのシンプルな感じや、細い線を装飾的に使っているところを引き継いだつもりです。
カラーは、ロゴに使ったグリーンのほぼ1色で統一。色分けが必要な部分は、彩度を落とした色をつかって落ち着いた印象にしています。
線だけだと少しさみしい感じや、静的な感じがしたので、背景に少しだけ波線や○、斜線のモチーフを使って動きを出し、明るい感じ、柔らかい感じを出しました。
若い人や初めて事務所の存在を知った人に、信頼感を与えつつ、とっつきづらいと思わせないようにしたくて、やりすぎないバランスを狙うのが難しかったです。
先生には、
「電話やお問い合わせフォームのボタンのデザインがとても見やすく、うまい」
「（PC版だと）左右にモチーフがあり、視線が動くので楽しさが感じられる」
「弁護士事務所として、しっかり話を聞いてくれそう、ぼったくられたりしなさそうな印象」
「（これまでの課題で一番大変だったという私の感想を受けて）これまでで一番良くできている」
と言っていただきました。
改善点としては、「トップページでは左右非対称にモチーフが使われており遊びがある感じだが、下層ページの『ご挨拶』では左右対称でより整然とした印象になるので、統一したほうがいいかもしれない」とのことでした。
「ご挨拶」のページが、長い文章がひとまとまりのページなので、どのようにモチーフを入れるか悩んだんですよね…。
どういうふうに動きを出せるか、これから修正してみたいと思います。
バナー（おまけ）
「ロゴ・Webサイト以外に、できればその他の制作物をもう１点提出すること」という課題だったので、私はInstagramのバナー広告を制作しました。
といっても、Webサイトやロゴに時間を取られすぎて、ものの10〜20分で制作したオマケ程度になってしまったのですが…。
Instagramということで思い切り若年層・女性向けを意識したデザインにしました。
同じ緑を基調にしつつ、太めの文字にしたりフリー素材のイラストを使ったりと、Webサイトのトーン＆マナーとは少し違う雰囲気にしています。
先生からは、「優しげな印象は全体通じて保たれているので問題ないのでは」と言っていただきました。
また、「キャッチコピーがとても上手」とおっしゃっていただきました！嬉しかったです。
振り返り
ページ数もコンテンツ数も多く、これまでで一番時間もかかって苦労したので
完成品に良い評価をもらえて、とても達成感がありました！
ちなみに、制作時間としては、ロゴ・Webサイト・バナー合わせて20時間強ぐらいの気がします。
全体的に、「弁護士事務所として信頼感を与えつつ、とっつきづらいと思わせないようにする」というバランスがやっぱりすごく難しかったですね。
今も見返すと「Webサイトのモチーフが少し賑やかすぎるのでは…」という感じがします。
コーディングのほうの授業の最終課題として、このサイトの実装までやりとげたいなと思っているので、もう少し改善して頑張っていきます。
アプリ紹介LPをデザイン〜コーディング（課題）
お久しぶりです。
今日は、先週の火曜日に提出した課題についてまとめます！
今回はコーディングの授業の課題で、企画・デザイン・実装まですべて自分で行うというものでした。
特に実装はなかなか思うようにいかず大変でしたが、そのぶん完成したときの喜びも大きかったです。
それに、実際のWebサイトとしてURLがあると、ほかの人にも共有しやすいです。
友達、実家の家族にいっぱい見せました。笑
制作物
さっそく完成物をお見せします。
以下のURLより実際のサイトをご覧いただけます！
（受講期間中は学校のWebサーバーを使わせてもらえるような形だと思うので、
そのうち消えてしまうかもです）
サイトについて
このLPで紹介しているアプリは、実際にUI/UXの授業で制作しているものです。
UI/UXの授業は、5人グループで半年間かけてひとつのアプリを制作するという形式です。
私たちのグループには1歳児を持つお母さんがいたことをきっかけに、「乳幼児とのお出かけをサポートするアプリ」をつくることになりました。
アプリ自体は鋭意制作中ですので、その過程もまたまとめようと思いますが
このアプリを紹介するLPを制作すると決めた時点では、すでにブランドカラーやロゴ、イメージキャラクターなどが決まっていました。
（グループの中にグラフィックデザインやUI/UXデザインの経験がある方がいらっしゃり、その方がデザイン面で活躍してくださいました！）
今回は、そうしたロゴやデザイントーンはすでに決まっている状態で、
画像をお借りしてLPをデザインしています。
個人的には、いつもより実際のお仕事に近い形でデザインができたのかな？と思っています！
制作過程
企画〜デザインコンセプトの決定
学校で配布していただいたテンプレートをもとに、ごく簡単にですが
今回のサイトの競合調査や作成の目的、ターゲットをまとめました。
ブランドカラーの黄色を基調にすることはほぼ決定事項として、
を意識してデザインを行うことにしました。
Web Design ClipなどでアプリのLPをいろいろ見てみたのですが
シンプルでスタイリッシュかつ、曲線的でやわらかなな印象のgincoや
メインカラーが同じ黄色で、ポップでありながら優しい雰囲気のpaymeなどのサイトをかなり参考にさせていただきました。
デザイン作成
デザインカンプ・WFはFigmaで作成しました。▼
黄色をメインにしつつ、グレーも使って少し落ち着きも感じられるトーンにし、
画像を角丸＋太めの枠線付きにすることでかわいらしさ、柔らかさを出しました。
今回はレスポンシブ対応のWebサイトを制作するという課題だったので、PC、スマートフォン、タブレットの3パターンのデザインを作成しています。
以前のWebグラフィックの課題で、ファーストビューだけPC・スマホの2パターンのデザインを組んだことはあったのですが
タブレットのデザインは初めてだったので、どのように位置づけてデザインするかは少し迷いました。
いろいろなサイトのレスポンシブ対応の様子を参考にさせてもらい
タブレットは基本的にはスマホ版と同じデザインにし、ファーストビューだけPCに近いスタイルにしています。
コーディング
HTML・CSSのほか、jQueryプラグイン（ハンバーガーメニュー・スライダー）も使用しました。
スマホ版は問題なくコーディングできたのですが、タブレット版・PC版で画像と文字を横並びにするのに苦労したり
PC版の「できること」のセクションで文字と画像の左右を互い違いにするのに手こずったり…。
ハンバーガーメニューが変な挙動をしたり、スライダー（slickというプラグインを使用）の画像が動かなくなったり…。
なかなか大変でしたが、最終的になんとか形にすることができました。
コーディングは3日ぐらいにわたって行なったのですが、最終日になるとだいぶうまくいかない理由がわかってくるようになりました！
特に、CSSのカスケーディングの仕組みをきちんと理解できていなかったために、セレクタの優先度が入れ替わってしまっているのが原因のことが多かったです。
たまにスライダーの挙動がおかしくなってしまうという問題があるので、実際の仕事の成果物とするにはやっぱりまだダメだなという感じですが
ぱっと見は自分でも十分ホンモノっぽいWebサイトに見えるので、できたときとても嬉しかったです。
先生からの講評
授業での簡単なプレゼンもあったのですが、その後先生がありがたいことにひとりずつ講評を文章にまとめてくださったので
そのまま掲載させていただきたいと思います。
【ビジュアル】
白と黄色の背景色のコントラストが印象的で、ターゲットにマッチした色使い、また余白を広めに指定する事で、シンプル且つみやすいサイトに仕上がっていると言えます。
また、PCでのナビゲーションとメインビジュアルをフルスクリーンで配置し、コンテンツエリアには内部固定を使用したところなどもトレンド感も感じる印象を受けます。レスポンシブでのレイアウト変化も、基本的には適切に配置できていると感じました。
＜気になる点＞
１、ナビゲーションの背景色
プレゼン時にも話しましたが、ナビゲーションの背景色が黒なので、サイト全体のイメージに合わない印象を受けます。
この場合は明るめの色（白など）でテキストを黒で反転させるなどにすると統一感が出るのでは無いでしょうか？２、モバイルでのダウンロードボタンの配置
これもプレゼン時にも話しましたが、モバイル表示の際のダウンロードボタンの配置が気になります。
２段で表示する方法も話しましたが、この場合、ダウンロードボタンの水平位置が不自然なので、ハンバーガーメニューとダウンロードボタンのサイズを共に小さくし、この２つをセットで右サイドにまとめて配置する方法、またはロゴをセンターに配置し、両サイドにハンバーガーとダウンロードボタンを振り分けるアイデアでも良いかもしれません。
【コーディング】
基本的な文書構造に関しては、よく理解できていると言えるでしょう。
検索エンジン対策に関しても、意識的にキーワードを埋め込んでいる印象を受けます。
コメントタグに関しても意識していることが伝わってくる記述となっていますが、css内部ではもっと積極的に入れていくと良いでしょう。
メディアクエリやビットマップの使用も問題無くできています。気になる点は一つだけ
メインビジュアルの文書構造
メインビジュアルである「#top」の要素がmain内に配置されています。
メインビジュアルは、いつも授業でも「#top_main」としてmain外に配置していますが、ここはファーストビューなので特殊な要素としての文書構造が必要です。
タグは無いのですが、あえてmainとは別物として配置するのがある意味文書構造と言えます。
すごく的を射たご指摘だと思いました…。
ハンバーガーメニューは動くようにするまでに手こずったので、デザイン面の細かいところにこだわれていなかった、、というのが言い訳です。
文書構造も、<main>とメイン画像を分けたほうがいいというのはこれまであまり意識していなかったので、今後に活かしていきたいと思います。
総括
大変でしたがその分学びも大きく、達成感も大きい課題でした！
JavaScriptの扱いに手こずってデザインにこだわりきれない部分があったのが反省点です。
さっそく1ヶ月後にもうひとつWebサイトを一からつくるという課題が控えているので、手直しできるとしたら少し先になりそうですが
割と気に入っているアウトプットになったので、またアップデートできたらいいなと思います。
