ようじょのおえかきちょう

ふぇぇ お医者さんにペン持ったらダメっていわれた〜〜

アニメイトラボさんでお世話になりました + なつやすみのおもいで

この夏休み、8月半ばから9月末まで、千駄ヶ谷と代々木の間にある アニメイトラボ さんでお世話になりました。いっぱい経験させてくれてありがとうございました。

経緯

ブログを書いたらCTOからお話が振ってきた

アニメイトラボさんについて

を運営しているところです。

社員さんの数は ここ に24名と書いてありますが、もっといた気がします。もしかしたら分裂できる人とかいるのかもしれません。

どんなことをしたの

かきました

これまではIssueに細かく分けたタスクがいっぱい置いてあってそれをやっていくのが多かったですが、今回は「ラジオ機能をなんかよくする」というざっくりした目標を与えられて、自分で考えてアプローチしていく流れでした。より「業務に近い」感じがしてわくわくしました。

勉強したこと

オフィスの雰囲気とか

床・壁・机がカラフルで可愛かったです。

アニメイトラボというだけあってアニメ・声優・アイドルなど好きな人が多く、ときどき誰かの机の上に30cmぐらいに積まれたCDビルが2つぐらい建ってました(乃木坂、ゆっふぃーなど)。席が近いとおこぼれをもらえます。

夏は台風が多く電車がよく止まっていたので、何回かリモート作業をしていました。チャットで一言連絡すれば特に申請とか要りません(今までお世話になったところも全部そんな感じ)。

それから徒歩数分のところに新宿御苑があるので、年パス買って出勤前や昼休みに芝生でぼーっとしてました。


なつやすみのおもいで

Money Forward さん、Goodpatch さんのオフィスに遊びに行かせてもらいました。オフィスがカッコよかったです!

9月はじめは関西に帰ってRubyKaigiのHelperをしていました。1日目の懇親会でたまたま現職と前職と前前前職の会社の人が集合して「いや〜うちのやましーがどうも」みたいにご挨拶してるのを見て親戚の集まりに来た気持ちになりました。特定の会社とかじゃなくてコミュニティの人たちに支えてもらってるんだなーって嬉しくてちょっとうるっと来てたのは内緒です。

土日は寝てるか最近の激ヤバモダンJSの勉強をしていました。

さいごに

一ヶ月半という期間はいろいろやるには短すぎて、あっという間に過ぎていきました。 昨日から学校が始まっていますが、授業や休み時間があまりにもゆっくり過ぎていくので焦りを覚えるほどです。

最終日に「 デザインの伝え方 」という本をいただいたので、次の休みまではそれを読んで血中エモ濃度を高めつつ、もうちょっとJSを使えるようにいろいろ書いてみようと思います。

次の春休みもどこかでお世話になりたいと思っていますが、まだはっきりとは決まっていません。 もしよろしければ雇ってください。18歳なりに働きます。

夏休みいっぱいがんばったで賞

http://www.amazon.co.jp/registry/wishlist/3KDNW63RQCCKNwww.amazon.co.jp

#design_trace ①「デレステ」「スクフェス」のデザイントレース

デザイントレースをはじめました

世の中に出回っているサイトやポスターとかを自分も真似して作ってみる「デザイントレース」なる方法があるらしいです。

細かいこだわりやパーツの組み合わせ方、全体のまとめ方とか勉強になるかなーと思ってぽつぽつ始めていこうと思います。 元々模写が好きなので楽しんで続けれられるはず。

気をつけたこと

  • がんばりすぎない
  • 数pxズレてるとかは目をつぶる
  • めんどくさそうなパーツはどんどんトリミングしてサボる

わたしのスキル

  • 持ってるフォント(FONTWORKSさんのが多い)は見たら大体予想がつく
  • けど持ってないフォントはわからない
  • 趣味でイラレ使う
  • お仕事や学校でそういうのをやってるわけではない、いわゆる素人

デレステ

フォント

まずはお世話になってる「アイドルマスター シンデレラガールズ スターライトステージ」のミッション画面。

使われているフォントは、終筆・折れ部分の切れ味が(縦横にスパっと切ったように)特徴的な「ロダンNTLG」です。

そのまま文字を入力しただけだと全体的に肩幅が狭くなり、特にスマホなど小さい画面で見たときにつらそうです。トラッキング(字間)を大きくして、パッと見たときの風通しを良くします。

それから英字と日本語の間に謎の隙間ができて2つの単語のように見えてしまっているので、これも無くしていきます。

一番下の「トラッキング調整なし」が入力そのまま、上の「トラッキング調整あり」が調整後です。

f:id:yamasy1549:20160809165038p:plain

期限・タブ

「期限」背景の楕円は灰色ですが、よく見るとその縁はもう少し白い灰色になっています。目立ちやすいからとか理由があるのかもしれませんが、私にはまだよくわかりません…

activeはタブは背景がピンクになり、凹ませて見せています。「デイリー」と「ウィークリー」を比較すると影のつき方が上下逆になっています。ピンク背景のときは文字が白になるのですが、黒い縁取りのせいか収縮して見えてしまったので、ワンランク上の太さのフォントを使いました(EB -> UB)。

あと他には全体的に右上から光が当たったような効果があったのですが、めんどくさかったのでやりませんでした。

f:id:yamasy1549:20160809170457p:plain

リスト

デレステのリストはカード式で、タイトルは最大で2行です(2行超えてるのを見たことない)。 詳細ボタンは四角く、いかにも「押せますよ」感が出ています。中身は今回は作っていません。

達成度はプログレスバーになっていて、どこまでやったかを視覚的に見せています。 報酬の内容はピンク色(+アイテムのアイコン)になっています。報酬を見てどれをやるか決める人が多いんでしょうか。

また「ミッション内容+詳細」と「達成度+報酬」を区切るために点線を用いています。

f:id:yamasy1549:20160809171534p:plain

全体像

後ろの円はこのサイトから拝借しました。ありがとうございます。

www.orefolder.net

こんなタスク管理ツールがあったらちょっと使ってみたいです。誰か作らないかな。

f:id:yamasy1549:20160809172337p:plain

スクフェス

フォント

次は、これまたお世話になってる「ラブライブ!スクールアイドルフェスティバル」の課題画面。

見ただけではフォントが分からなかったのでインターネッツの力を借りると「モトヤLマルベリ3等幅」が近い、とのことだったので代用。

でもやっぱりちょっと違うのでうーんという感じ。なんなんじゃろ。

f:id:yamasy1549:20160809173404p:plain

詳細

これもフォントが分からなかったので「UD 丸ゴ_ラージ」を少し太らせて代用。

星の模様は自分でいい感じに作りました。模様を入れることで目を引きやすくなっています。

f:id:yamasy1549:20160809173616p:plain

リスト

難易度マークはトリミングしてサボりました。

スクフェスのリストはピンクの点線で区切られていて、タイトルは1行を超えると「...」で省略されます。

「おつかいに行こう!」の文字が、ピンクの帯に対して上下揃えではない(帯の中央にない)ところが意外でした。

報酬は文字+アイテムのアイコン、達成率はプログレスバー、とここはデレステとほぼ同じです。

f:id:yamasy1549:20160809174313p:plain

全体

背景はスノハレです。

横方向に伸びる「〜よう!」(ピンクの帯)と達成率のプログレスバーが交互に来てる感じが好きです。

f:id:yamasy1549:20160809174933p:plain

やってみて

点線の使い方やリストの方法がそれぞれ違って勉強になりました。

進捗をtwitterに上げていったら、ちらほらRTやfavが来て面白かったです。

次は牛乳パックのパッケージか、何か別のアプリをトレースしようかなと考えてます。ネタあればください。

GitHub Patchwork in Akashi を開催しました

きのう7/8(金)に明石高専にて「GitHub Patchwork in Akashi」を開催しました。

参加人数は40人近くで、そのうち10人弱がメンターでした。

f:id:yamasy1549:20160709222121j:plain

なんでやったん

4月に明石高専で開いた「高専カンファレンスlol」に GitHub Japan の堀江さんがいらっしゃって、 「今年はいろんな高専まわってみたいんで、ぜひ呼んでください」みたいなことをおっしゃっていて、 私も学内向けに6月か7月ごろに git講習会を開きたいなと思っていたので、来ていただくことになりました。 (実際は学外からの参加も可能にしました)

なにやったん

Git-it という gitのチュートリアルのようなデスクトップアプリを参加者にもくもくやっていってもらいました。

  • gitのなにが嬉しいの?
  • {branch,remote}って?
  • pull req を送ってみよう

と一通り基本的な使い方をガイドにそって学んでいきます。

でやったん

開催後にとったアンケートの結果を公開します。Google form って便利ですね。

参加パートを教えてください

f:id:yamasy1549:20160709213442p:plain

学年を教えてください

f:id:yamasy1549:20160709213516p:plain

講習会以前より、GitHubを使ったことがありましたか?

f:id:yamasy1549:20160709213709p:plain

本日の勉強会の率直な感想をお聞かせください

f:id:yamasy1549:20160709213732p:plain

今後、GitやGitHubを使ってみたいと思いますか?

f:id:yamasy1549:20160709213819p:plain

感想を自由にお書きください(良かったところ、悪かったところなど)

参加者

  • もう少し解説などがあればよかったと思います。 それでもすごく楽しかったです。
  • 楽しかったです
  • 楽しかったです。今後の使い方などわからない点も多いのでもう一回このような講習を開いて欲しいです。 ありがとうございました。
  • もっと経験を積んで次はメンターとして参加したい。
  • 学生特権で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.github.io

kosen14s 読書会 10日目、担当やましーです。担当は1周まわったのですが有志により読書会は続いており、立川のガルパンのような状態です。まだもうちょっと終わりそうにないしどこまで続くか見守っていきたいです。

今回は『HTML5/CSS3モダンコーディング フロントエンドエンジニアが教える3つの本格レイアウト スタンダード・グリッド・シングルページレイアウトの作り方』という本を紹介します(読んだのは去年の秋頃ですが…)。

むかし「これすごいで一回見てみ〜」と http://yoshiko-pg.github.io/ というポートフォリオサイトを見せてもらったことがありまして、HTML/CSS/JSでこんなに広い表現ができるのかとびっくりしました。

それからしばらく経ってこの本が出ると聞いて、ふと著者のかたのお名前を見て「あ!!!!!あのすんげーポートフォリオサイトの!!!」「これは絶対読まなあかん」と思って買いました。

どんな本?

よく見る人気のWebページのデザインスタイル

をハンズオン形式で作っていきましょう、という内容です。リンク先に見本があります。

IE9より下は切っていて、

HTMLの

  • section
  • article
  • nav

CSS

  • :last-child擬似クラス
  • 単位rem

などをハック無しで使う前提でいます。うれしい。

とにかくサンプルサイトがかっこいい!

コードを書いていくたびサイトがどんどんかっこよくなっていくので、モチベーションが途切れることがありません。 やっぱり作るならかっこいいサイトがいいです。

著者のかたは Goodpatch の社員さんなんですよね。憧れます…!

ONE POINT の説明がわかりやすい!

例えば、プロパティを当てる前→当てた後、marginについて、などの図がとてもわかりやすいです。

これまで position や display をなんとなくで使ってしまっていたのですが、図を見て「なるほどだからあの時うまくいかんかったんか〜」と理解できました。

今までの自分が書いたコードを振り返るようになる

この本を読み終わってサンプルサイトも3つ作り終えると、「めっちゃ勉強になった…すごい本に出会ってもた!」という感情のほかに「やばい、今まで書いてきたコード無駄多くて全然だめやん…」「できることなら全部書き直したい」と思うようになりました。

もっと前にこの本を読めていたら、開発スピードも上がっていただろうしもっとかっこいいサイトになっていただろうなぁ…

こんなひとにおすすめ

対象は、HTML5/CSS3を書いて主要なタグ・プロパティを知っている人〜ひとりでWebサイトを作ったことがある人、でしょうか。逆に全く触れたことのない人にはちょっと難しいかもしれません。

主要なタグ・プロパティを知っている人は「こんな書きかたをするんだ」「こんなこともできるんだ」、ひとりでWebサイトを作ったことがある人は「こんな実装方法もあるのか」「今度はこう書いてみよう」とそれぞれ勉強になる部分が変わってくると思います。

おわりに

この本が誰かのほしい物リストに入っていたら必ず贈るようにしています。 Kindle版は時々セールになっているので、ぜひ読んで写して書いてみてほしいです。

『UIデザインの心理学』を読んでいます #kosen14s 読書会

kosen14s.github.io

kosen14s 読書会 4日目、担当やましーです。

3日目は いらいざ による 「精神分析入門」を読んで でした。文章めっちゃ読みやすくてびっくりした、高校は高専と違ってちゃんと国語の授業あるんだな…

さて、私は『UIデザインの心理学―わかりやすさ・使いやすさの法則』という本を紹介します。

どんな本?

UIデザインの心理学―わかりやすさ・使いやすさの法則

UIデザインの心理学―わかりやすさ・使いやすさの法則

Designing with the Mind in Mind, Second Edition: Simple Guide to Understanding User Interface Design Guidelines』を翻訳したものです。

UIデザイン原則と心理学上の根拠がわかる一冊。

◎物事を認識するときにどのようなバイアスがかかるか

◎物事をどのように見分けてとらえるか

◎色情報をどのように処理するか

◎周辺視野や読む能力がどのように機能するか

◎注意、記憶、想起、学習、意思決定をどのように行うか

◎使いやすいと感じる物理的法則や時間的法則は何か

と紹介文にあるように、よく言われるUIデザインの原則が「なぜ良いのか」また「どうすればいいのか」を人間の身体・心理目線で解説した本です。

「心理学」とありますが、心の動きにルールを見つけようとする「behaviorism(行動主義)」とか「認知心理学」とかの言葉を使ったほうがより近いかもしれません。あんまり詳しくないのでいらいざに教えてほしい…

こんなひとに読んでほしい

  • 私みたいに、独学でデザインに触れているひと

  • デザインはセンスがないとできないと思っているひと

ちょっとだけ中身を紹介

本当はこの本の内容をまるごと紹介したいのですが、全部で280ページあるのと、まだ私が最後まで読み切れていないのもあって、5章「周辺視野」についてだけ紹介して雰囲気をつかんでもらえればと思います。

内容を元に、簡単なスライドを作ってみました。

最近のかっこいいレイアウトや人気のデザインなどにはほとんど触れていません。かわりに私たち人間が普段どうやってモノを見ているのか、何が得意で何が苦手なのか、どんな癖があるのか…についてが豊富な図・スクリーンショット・過去の研究を交えて紹介されています。

「わかりやすさ・使いやすさ」は考えれば考えるほど行き詰まってしまいますが、この本は人間の身体や認知心理の視点からヒントを出してくれます。

「一貫性を保ちましょう」「記憶しなくても見ればわかるようなデザインにしましょう」などはよく言われるデザインの原則の例ですが、この本を読み終えると、なぜそれが原則とされるほど大事なのか、説得力のある理由を説明できるようになると思います。

他の本も紹介

武舎 広幸さん、武舎 るみさんが翻訳されている本には他にも

などがあります。

おわりに

学生が気軽に買える値段と重さではないので、図書館に入れてもらうのがベストだと思います。欲しいけど :)

明日は ふるつき の担当です。ふるつきは高専生のくせに文章上手なのでたのしみにしてます!