#design_trace ①「デレステ」「スクフェス」のデザイントレース
デザイントレースをはじめました
世の中に出回っているサイトやポスターとかを自分も真似して作ってみる「デザイントレース」なる方法があるらしいです。
細かいこだわりやパーツの組み合わせ方、全体のまとめ方とか勉強になるかなーと思ってぽつぽつ始めていこうと思います。 元々模写が好きなので楽しんで続けれられるはず。
気をつけたこと
- がんばりすぎない
- 数pxズレてるとかは目をつぶる
- めんどくさそうなパーツはどんどんトリミングしてサボる
わたしのスキル
- 持ってるフォント（FONTWORKSさんのが多い）は見たら大体予想がつく
- けど持ってないフォントはわからない
- 趣味でイラレ使う
- お仕事や学校でそういうのをやってるわけではない、いわゆる素人
デレステ
フォント
まずはお世話になってる「アイドルマスター シンデレラガールズ スターライトステージ」のミッション画面。
使われているフォントは、終筆・折れ部分の切れ味が（縦横にスパっと切ったように）特徴的な「ロダンNTLG」です。
そのまま文字を入力しただけだと全体的に肩幅が狭くなり、特にスマホなど小さい画面で見たときにつらそうです。トラッキング（字間）を大きくして、パッと見たときの風通しを良くします。
それから英字と日本語の間に謎の隙間ができて2つの単語のように見えてしまっているので、これも無くしていきます。
一番下の「トラッキング調整なし」が入力そのまま、上の「トラッキング調整あり」が調整後です。
期限・タブ
「期限」背景の楕円は灰色ですが、よく見るとその縁はもう少し白い灰色になっています。目立ちやすいからとか理由があるのかもしれませんが、私にはまだよくわかりません…
activeはタブは背景がピンクになり、凹ませて見せています。「デイリー」と「ウィークリー」を比較すると影のつき方が上下逆になっています。ピンク背景のときは文字が白になるのですが、黒い縁取りのせいか収縮して見えてしまったので、ワンランク上の太さのフォントを使いました（EB -> UB）。
あと他には全体的に右上から光が当たったような効果があったのですが、めんどくさかったのでやりませんでした。
リスト
デレステのリストはカード式で、タイトルは最大で2行です（2行超えてるのを見たことない）。 詳細ボタンは四角く、いかにも「押せますよ」感が出ています。中身は今回は作っていません。
達成度はプログレスバーになっていて、どこまでやったかを視覚的に見せています。 報酬の内容はピンク色（+アイテムのアイコン）になっています。報酬を見てどれをやるか決める人が多いんでしょうか。
また「ミッション内容+詳細」と「達成度+報酬」を区切るために点線を用いています。
全体像
後ろの円はこのサイトから拝借しました。ありがとうございます。
こんなタスク管理ツールがあったらちょっと使ってみたいです。誰か作らないかな。
スクフェス
フォント
次は、これまたお世話になってる「ラブライブ！スクールアイドルフェスティバル」の課題画面。
見ただけではフォントが分からなかったのでｲﾝﾀｰﾈｯﾂの力を借りると「モトヤLマルベリ3等幅」が近い、とのことだったので代用。
でもやっぱりちょっと違うのでうーんという感じ。なんなんじゃろ。
詳細
これもフォントが分からなかったので「UD 丸ゴ_ラージ」を少し太らせて代用。
星の模様は自分でいい感じに作りました。模様を入れることで目を引きやすくなっています。
リスト
難易度マークはトリミングしてサボりました。
スクフェスのリストはピンクの点線で区切られていて、タイトルは1行を超えると「…」で省略されます。
「おつかいに行こう！」の文字が、ピンクの帯に対して上下揃えではない（帯の中央にない）ところが意外でした。
報酬は文字+アイテムのアイコン、達成率はプログレスバー、とここはデレステとほぼ同じです。
全体
背景はスノハレです。
横方向に伸びる「〜よう！」（ピンクの帯）と達成率のプログレスバーが交互に来てる感じが好きです。
やってみて
点線の使い方やリストの方法がそれぞれ違って勉強になりました。
進捗をtwitterに上げていったら、ちらほらRTやfavが来て面白かったです。
次は牛乳パックのパッケージか、何か別のアプリをトレースしようかなと考えてます。ネタあればください。
