今回のサイト
就職前の模写と分けるため、タイトルを少し変更することにしました。
実務では「雰囲気とかこんなサイトにしよっか」と毎回ディレクターの方が参考サイトを送ってくださるのですが、基本それを模写しています。
今回は【学校×スポーティ】の組み合わせ。模写させていただくサイトはこちら。
スタイリッシュな多角形を使い、爽やかで若い印象のサイトです。また、フラットデザインですがあしらいが多く、アニメーションも豊富で作りこまれています。
PC版のデザイン模写＆観察
模写
写真の選び方やレタッチも勉強したくて、メインビジュアルだけ写真から探しました。国際色豊かな感じにしてみたよ。でもあとから気付いたけど、スポーツ選手をサポートする仕事に就くための学校なので、選んだ写真がミスっておる。。。まあ、ニュアンスということで。
観察
スマホだと字がゴマ粒みたいで見づらいんですが、クリックするとポップアップで見ることができます。
途中、XDでのトラブル
今回XDで模写をしようと思ったのですが、2点トラブルがあり、色々試してみたりAdobeさんに聞いたりしたので解決法をまとめます。同じように困っている方がもしいたら参考になれば幸いです。
ダウンロード済のフォントが表示されない
ダウンロードしてすでにPhotoshopでは使えているNoto Sans JPがXDで表示されない、というトラブルが。
調べてみて、これちゃう？というのがあったのですが、やってみても改善されず…。
こちらは自宅のWindows10でなった現象ですが、会社のWindows10でも同じ状況になってしまったので、Adobeさんに問い合わせました。教えていただいた解決法がこちら。
【解決法】
XD自体をアンストール後、再インストールする。
もしくはCreative Cloudからフォント管理を開き、該当フォントをアンインストール→再インストールする。
私はXD自体をアンストール後、再インストールして、PCを再起動したら直りました！
斜体の日本語フォントを選んでもアートボードに反映されない
状況を詳しく説明するとこんな感じ。
Psdとイラレも同様。なお、この2つは斜体ボタンあるのでそれで代用。
XDはそもそも斜体ボタンがなく、例えばメイリオのItalicを選んだとして、
選択はできるがアートボードの文字に反映されない。
Adobeに確認したのですが、チャットでは解決せず、電話と画面操作で受け答えしてくれました。
が、Adobeの人も自社のWindows10で検証したけど直らなかったそうで、仕様かも？とのこと。あれ、以前はできてた気がするんですが…。
【解決法】
今のところ、なし（知っている方いらしたらぜひ教えてください。。。）
日本語の斜体フォントのテキストはXDでは打てないので、PhotoshopやIllustratorで画像を作って対応する。
というわけで、開発のみなさま、どうかなにとぞXD斜体ボタンの追加をお願いします（というのをチャットで要望に出してきた）。
所感
今回もPC版だけで力尽き（というか実務のデザインが一通り終わって新規が来た）、SPデザインまで手が回りませんでした。本当はコーディングまでできるともっと勉強になるんだけどなぁ…。
今のところ、平日毎日やって1週間くらいで1サイト・PCデザインが限度みたいです。
でも今回もすごく勉強になりました！構成もそうですし、言葉遣いも考えられておる。細かいあしらいとか、あるのとないのでは格好良さが全然違います。
同じものを作るわけにはいかないので、他のサイトもいくつか参考にしていますが、やっぱり見るだけなのと手を動かす模写では得る情報量が違うな、と感じます。
1案件につき1サイト模写と気付きをまとめるのが理想なんですが、今回も実務の方が先に進んでしまいました…。
次は子供×医療のサイトを勉強しようと思います。時間を見つけてがんばる！
コメント