MENU

【サイト模写&観察02】学校×スポーティ

2020 12/04
【サイト模写&観察02】学校×スポーティ
目次

今回のサイト

就職前の模写と分けるため、タイトルを少し変更することにしました。

実務では「雰囲気とかこんなサイトにしよっか」と毎回ディレクターの方が参考サイトを送ってくださるのですが、基本それを模写しています。

今回は【学校×スポーティ】の組み合わせ。模写させていただくサイトはこちら。

福岡医健・スポーツ専門学校
スポーツトレーナーの専門学校|福岡医健・スポーツ専門学校
スポーツトレーナーの専門学校|福岡医健・スポーツ専門学校アスレティックトレーナー(AT)やスポーツ系資格、鍼灸師、柔道整復師などの医療系国家資格の取得、栄養・コンディショニングの技術を学び、スポーツ業界で「アスリートを...

スタイリッシュな多角形を使い、爽やかで若い印象のサイトです。また、フラットデザインですがあしらいが多く、アニメーションも豊富で作りこまれています。

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サイト模写と気付きをまとめるのが理想なんですが、今回も実務の方が先に進んでしまいました…。
次は子供×医療のサイトを勉強しようと思います。時間を見つけてがんばる!

この記事が気に入ったら
フォローしてね!

シンプル美と機能性を両立させた、国内最高峰のWordPressテーマ『SWELL』

ブロックエディター完全対応のWordPressテーマ。
圧倒的な使い心地を追求し、日々進化しています。

この記事を書いた人

コメント

コメントする

CAPTCHA


目次
閉じる