#design_trace ①「デレステ」「スクフェス」のデザイントレース
デザイントレースをはじめました
世の中に出回っているサイトやポスターとかを自分も真似して作ってみる「デザイントレース」なる方法があるらしいです。
細かいこだわりやパーツの組み合わせ方、全体のまとめ方とか勉強になるかなーと思ってぽつぽつ始めていこうと思います。 元々模写が好きなので楽しんで続けれられるはず。
気をつけたこと
- がんばりすぎない
- 数pxズレてるとかは目をつぶる
- めんどくさそうなパーツはどんどんトリミングしてサボる
わたしのスキル
- 持ってるフォント(FONTWORKSさんのが多い)は見たら大体予想がつく
- けど持ってないフォントはわからない
- 趣味でイラレ使う
- お仕事や学校でそういうのをやってるわけではない、いわゆる素人
デレステ
フォント
まずはお世話になってる「アイドルマスター シンデレラガールズ スターライトステージ」のミッション画面。
使われているフォントは、終筆・折れ部分の切れ味が(縦横にスパっと切ったように)特徴的な「ロダンNTLG」です。
そのまま文字を入力しただけだと全体的に肩幅が狭くなり、特にスマホなど小さい画面で見たときにつらそうです。トラッキング(字間)を大きくして、パッと見たときの風通しを良くします。
それから英字と日本語の間に謎の隙間ができて2つの単語のように見えてしまっているので、これも無くしていきます。
一番下の「トラッキング調整なし」が入力そのまま、上の「トラッキング調整あり」が調整後です。
期限・タブ
「期限」背景の楕円は灰色ですが、よく見るとその縁はもう少し白い灰色になっています。目立ちやすいからとか理由があるのかもしれませんが、私にはまだよくわかりません…
activeはタブは背景がピンクになり、凹ませて見せています。「デイリー」と「ウィークリー」を比較すると影のつき方が上下逆になっています。ピンク背景のときは文字が白になるのですが、黒い縁取りのせいか収縮して見えてしまったので、ワンランク上の太さのフォントを使いました(EB -> UB)。
あと他には全体的に右上から光が当たったような効果があったのですが、めんどくさかったのでやりませんでした。
リスト
デレステのリストはカード式で、タイトルは最大で2行です(2行超えてるのを見たことない)。 詳細ボタンは四角く、いかにも「押せますよ」感が出ています。中身は今回は作っていません。
達成度はプログレスバーになっていて、どこまでやったかを視覚的に見せています。 報酬の内容はピンク色(+アイテムのアイコン)になっています。報酬を見てどれをやるか決める人が多いんでしょうか。
また「ミッション内容+詳細」と「達成度+報酬」を区切るために点線を用いています。
全体像
後ろの円はこのサイトから拝借しました。ありがとうございます。
こんなタスク管理ツールがあったらちょっと使ってみたいです。誰か作らないかな。
スクフェス
フォント
次は、これまたお世話になってる「ラブライブ!スクールアイドルフェスティバル」の課題画面。
見ただけではフォントが分からなかったのでインターネッツの力を借りると「モトヤLマルベリ3等幅」が近い、とのことだったので代用。
でもやっぱりちょっと違うのでうーんという感じ。なんなんじゃろ。
詳細
これもフォントが分からなかったので「UD 丸ゴ_ラージ」を少し太らせて代用。
星の模様は自分でいい感じに作りました。模様を入れることで目を引きやすくなっています。
リスト
難易度マークはトリミングしてサボりました。
スクフェスのリストはピンクの点線で区切られていて、タイトルは1行を超えると「…」で省略されます。
「おつかいに行こう!」の文字が、ピンクの帯に対して上下揃えではない(帯の中央にない)ところが意外でした。
報酬は文字+アイテムのアイコン、達成率はプログレスバー、とここはデレステとほぼ同じです。
全体
背景はスノハレです。
横方向に伸びる「〜よう!」(ピンクの帯)と達成率のプログレスバーが交互に来てる感じが好きです。
やってみて
点線の使い方やリストの方法がそれぞれ違って勉強になりました。
進捗をtwitterに上げていったら、ちらほらRTやfavが来て面白かったです。
次は牛乳パックのパッケージか、何か別のアプリをトレースしようかなと考えてます。ネタあればください。
GitHub Patchwork in Akashi を開催しました
きのう7/8(金)に明石高専にて「GitHub Patchwork in Akashi」を開催しました。
参加人数は40人近くで、そのうち10人弱がメンターでした。
なんでやったん
4月に明石高専で開いた「高専カンファレンスlol」に GitHub Japan の堀江さんがいらっしゃって、 「今年はいろんな高専まわってみたいんで、ぜひ呼んでください」みたいなことをおっしゃっていて、 私も学内向けに6月か7月ごろに git講習会を開きたいなと思っていたので、来ていただくことになりました。 (実際は学外からの参加も可能にしました)
なにやったん
Git-it という gitのチュートリアルのようなデスクトップアプリを参加者にもくもくやっていってもらいました。
- gitのなにが嬉しいの?
- {branch,remote}って?
- pull req を送ってみよう
と一通り基本的な使い方をガイドにそって学んでいきます。
でやったん
開催後にとったアンケートの結果を公開します。Google form って便利ですね。
参加パートを教えてください
学年を教えてください
講習会以前より、GitHubを使ったことがありましたか?
本日の勉強会の率直な感想をお聞かせください
今後、GitやGitHubを使ってみたいと思いますか?
感想を自由にお書きください(良かったところ、悪かったところなど)
参加者
- もう少し解説などがあればよかったと思います。 それでもすごく楽しかったです。
- 楽しかったです
- 楽しかったです。今後の使い方などわからない点も多いのでもう一回このような講習を開いて欲しいです。 ありがとうございました。
- もっと経験を積んで次はメンターとして参加したい。
- 学生特権でGitHub educationをたくさん利用してみようと思っているのでそこの説明を詳しくしてほしかったです。
- メンターさんに名札をつけてもらった方が良かったのでは?
- とても楽しかったです
- 自分のペースで進めることができ、わからない点をとことん話し合うことができました。とても良い時間となりました。
- 良かった点:メンターの人数が多く、質問があればすぐに回答が得られた。 特に本家の方に質問をした際には非常にわかりやすく説明してもらえたので理解が深まった。 悪かった点:進め方がフリーすぎたため、最初何をするのかわからなかった。大枠の流れと各ツールの位置づけぐらいは軽く説明が欲しかった。
- 個人での説明が非常に良かったです。 わかりやすいし、丁寧だし、例えがすごく上手い。 あと、ピザ!超美味しかったです!
メンター
- 参加者から質問があったらすぐ呼んでもらえたので対応するのがすぐ出来たし,楽しかったです
- ピザ最高
- おつかれさまでした。いい雰囲気だったと思います
- 運営おつかれさまでした。
振り返って
事前準備・ツール
- 前日までにgitとGit-itをインストールしてもらって正解だった
- GitHub Desktop (& Git-shell) と Git-it の名前が似ていて、どれをどう使うのか初めて聞く人は混乱した(もうちょっと全体で説明が必要)
- win10で(?)Git-itが固まるなど不具合があった
- 学外のかたに学内LANを開放することができなかった(申し出があればわたしのモバイルルータ回線を貸し出した、テザリングの人もいた)
参加者
- 学外からの参加もOKにして良かった
- 参加者は、情報系部活の新しく入ってきた1年生が多い印象だった
- メンターさんには大学生(卒業生)や社会人のかたもいらっしゃいました。平日の夕方からありがとうございます :bow:
難易度
- 学生に絞って見ても、開発に慣れていない低学年から日常的にプログラムを書く高学年まで幅が広く、足並みを合わせずもくもく形式にして正解だった
- 低学年向けには、はじめの「gitとは?」みたいなところを講義形式で一斉に説明するなど、導入に工夫が必要と感じた
その他
- メンター用の名札を用意すればよかった
- お菓子とジュースを用意しててよかった。ピザを頼んでくださったのがすごく助かった
- メンターさんが一眼レフ持ってきてくれていい感じに集合写真が撮れた
開催後
- 参加ありがとうメールをすぐに送れた
- GitHub education についてメールで紹介できた
- 今回の続きみたいな、follow-up的なのを開くよ宣言ができた
- 開くぞ〜といったもののレベルがばらばらなので具体的に何やるかまだちゃんとまとまってない
- とりあえずGit-itの英語部分を日本語に翻訳、とかならできそうだからみんなでやってみたいね!
いまからラブライブ!サンシャイン!!観るので中途半端やけどこれで開催レポを終わります!!!
開催して良かったと思います。みなさん来てくれてお手伝いしてくれてありがとうございました!
『HTML5/CSS3モダンコーディング』を読んでいました #kosen14s 読書会
kosen14s 読書会 10日目、担当やましーです。担当は1周まわったのですが有志により読書会は続いており、立川のガルパンのような状態です。まだもうちょっと終わりそうにないしどこまで続くか見守っていきたいです。
今回は『HTML5/CSS3モダンコーディング フロントエンドエンジニアが教える3つの本格レイアウト スタンダード・グリッド・シングルページレイアウトの作り方』という本を紹介します(読んだのは去年の秋頃ですが…)。
むかし「これすごいで一回見てみ〜」と http://yoshiko-pg.github.io/ というポートフォリオサイトを見せてもらったことがありまして、HTML/CSS/JSでこんなに広い表現ができるのかとびっくりしました。
それからしばらく経ってこの本が出ると聞いて、ふと著者のかたのお名前を見て「あ!!!!!あのすんげーポートフォリオサイトの!!!」「これは絶対読まなあかん」と思って買いました。
どんな本?
HTML5/CSS3モダンコーディング フロントエンドエンジニアが教える3つの本格レイアウト スタンダード・グリッド・シングルページレイアウトの作り方
- 作者: 吉田真麻
- 出版社/メーカー: 翔泳社
- 発売日: 2015/11/02
- メディア: Kindle版
- この商品を含むブログを見る
よく見る人気のWebページのデザインスタイル
をハンズオン形式で作っていきましょう、という内容です。リンク先に見本があります。
IE9より下は切っていて、
HTMLの
- section
- article
- nav
やCSSの
- :last-child擬似クラス
- 単位rem
などをハック無しで使う前提でいます。うれしい。
とにかくサンプルサイトがかっこいい!
コードを書いていくたびサイトがどんどんかっこよくなっていくので、モチベーションが途切れることがありません。 やっぱり作るならかっこいいサイトがいいです。
著者のかたは Goodpatch の社員さんなんですよね。憧れます…!
ONE POINT の説明がわかりやすい!
例えば、プロパティを当てる前→当てた後、marginについて、などの図がとてもわかりやすいです。
これまで position や display をなんとなくで使ってしまっていたのですが、図を見て「なるほどだからあの時うまくいかんかったんか〜」と理解できました。
今までの自分が書いたコードを振り返るようになる
この本を読み終わってサンプルサイトも3つ作り終えると、「めっちゃ勉強になった…すごい本に出会ってもた!」という感情のほかに「やばい、今まで書いてきたコード無駄多くて全然だめやん…」「できることなら全部書き直したい」と思うようになりました。
もっと前にこの本を読めていたら、開発スピードも上がっていただろうしもっとかっこいいサイトになっていただろうなぁ…
こんなひとにおすすめ
対象は、HTML5/CSS3を書いて主要なタグ・プロパティを知っている人〜ひとりでWebサイトを作ったことがある人、でしょうか。逆に全く触れたことのない人にはちょっと難しいかもしれません。
主要なタグ・プロパティを知っている人は「こんな書きかたをするんだ」「こんなこともできるんだ」、ひとりでWebサイトを作ったことがある人は「こんな実装方法もあるのか」「今度はこう書いてみよう」とそれぞれ勉強になる部分が変わってくると思います。
おわりに
この本が誰かのほしい物リストに入っていたら必ず贈るようにしています。 Kindle版は時々セールになっているので、ぜひ読んで写して書いてみてほしいです。