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

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

友人に「最近デザインに興味がある」と言われた時、オススメしたい本たち

というより、自分が読んで面白かった本を中心に紹介。わりと初心者なので「いい感じの見た目」な意味でのデザインに関する本が中心だけど、自分の成長とともに、もっと広い意味でのデザインに関する本も追加していきたい。

あと、本だけじゃなくてサイトとかアニメ、広告なんかも載せていくつもり。

なんとなく感覚をつかみたい

ノンデザイナーズ・デザインブック

ノンデザイナーズ・デザインブック [第4版]

ノンデザイナーズ・デザインブック [第4版]

  • デザイナーじゃない人向けに、見せかたの原則が説明されている
  • デザイン気になりはじめて、この本から入りました、って人も多い
  • 身近なところでは、スライドや紙の資料を作るときに役立ちそう
  • 第4版からは日本語タイポグラフィについての内容が追加されて最高

なるほどデザイン

  • 前半はデザインの流れ(とても参考になる)が紹介されてる
  • 後半は引き出しとかネタ帳みたいな

やさしいデザインの教科書

やさしいテ?サ?インの教科書

やさしいテ?サ?インの教科書

  • 実例が多くて、文章もそこそこある
  • まさに教科書!

デザインのルール、レイアウトのセオリー。

デザインのルール、レイアウトのセオリー。

デザインのルール、レイアウトのセオリー。

  • どこが良くてどこが良くないのかを文章で説明してくれてる
  • Webに限らず広い用途でのデザインが中心

Web デザイン

だから、そのデザインはダメなんだ。 WebサイトのUI設計・情報デザイン 良い・悪いが比べてわかる

  • Webサイトに焦点を当てて、見開き1コンテンツで良いところ良くないところを解説してくれるから見やすい
  • 実際のサイト例を載せてくれてるのですぐ参照できる。うれしい
  • 説明がかなり詳しめ

情報の整理

今日からはじめる情報設計 -センスメイキングするための7ステップ

今日からはじめる情報設計 -センスメイキングするための7ステップ

今日からはじめる情報設計 -センスメイキングするための7ステップ

  • 設計 の意味が強いデザインのお話
  • スライド作る時とか便利そうな感じ
  • 情報がありすぎて混乱してきたら、これを読んで冷静になる

東京防災

東京防災

東京防災

  • 都が出してるくせにめちゃくちゃかっこいい
  • Kindleで無料なのでぜひ手元にとっておきたい
  • コンテンツの並べ方や注意をひかせる工夫とかいっぱい詰まってる

yamasy1549.hateblo.jp

世界観に溺れたい

シドニアの騎士

www.knightsofsidonia.com

エヴァンゲリオン

www.evangelion.co.jp

  • 色・フォントの使い方などなど…
  • アニメ放送開始が20年前だから、今でも各話タイトルのタイポグラフィカッコいいって言われるのすごいよね

ご注文はうさぎですか?

www.gochiusa.com

  • パステルカラーのお手本帳
  • だけじゃなく、思い切った勢いのある色使いもしている
    • ごちうさ サブタイトル
    • フォントのちからつよい :muscle:
    • ちなみにサブタイトルで使われているフォントは LETS STORE で8割方手に入る。学生割引で ¥5000/4年 とかいう破格

もっと広義な話

融けるデザイン ハード×ソフト×ネット時代の新たな設計論

融けるデザイン ―ハード×ソフト×ネット時代の新たな設計論

融けるデザイン ―ハード×ソフト×ネット時代の新たな設計論

  • UI(ユーザインタフェース)って本当にこうあるべきなの? みたいな
  • 当たり前に使っているものを見直すきっかけになる

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

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

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

  • UIデザインを人間の身体目線で説明している
  • 「使いやすい」の理由を理論的に解明
    • 他の本を読んで「あれはそういうことだったのか〜」と納得できる
    • あたま良くなった気分になる

yamasy1549.hateblo.jp

インダストリアルデザイン

デザインの骨格

デザインの骨格

デザインの骨格

  • 今読んでるところだけど、とにかく文章が読みやすい
  • 見ているものを新たな目線で捉えなおしていく。ものの見方が変わりそうな予感がする

PNGをよんで表示したい!

動機

パフォーマンス向上のためのデザイン設計

パフォーマンス向上のためのデザイン設計

「パフォーマンス向上のためのデザイン設計」という本を読んでいると、縦グラデーションの GIF と横グラデーションの GIF ではファイルサイズが大きく違うことが載っていた。水平方向の冗長性を取り除く圧縮アルゴリズムになっているらしく、気になったので軽く調べてみた。

調べていると、PNG は水平方向だけでなく垂直方向にもつよいことが書いてあった。PNG は CTF の問題でヘッダとか見たことあったので PNG で遊んでみようと思った。

つくったもの

github.com

f:id:yamasy1549:20170914021551p:plain

スクショだけ見てもわからんな… RGB じゃないと動かないのは仕様だしめっちゃ重いのも仕様!!!

フィルタリング形式の実装をミスるとこんなふうにアートになってたのしいあばばばば〜〜〜

f:id:yamasy1549:20170914021912p:plain

バイナリをよんで Tk ってやつで 1 ピクセルずつ四角を描いてる(ほかにやりようが思いつかなかった)。Ruby/Tk のドキュメントが殆どなかったので Python 実装 Tkinter の使い方を読んでオプション名とかを知った。

www.geocities.jp

PNG の中身(超ざっくり)

仕様書はこれかな…?

Portable Network Graphics (PNG) Specification (Second Edition)

日本語訳(PNG 1.0 仕様書の改訂版)は Web アーカイブとして残っている

PNG (Portable Network Graphics) Specification

N 番煎じなんだけど、メモとして。

シグネチャ

PNGシグネチャは 8 byte で、決まっている。 50 4e 47PNG を表している。

89 50 4e 47 0d 0a 1a 0a

チャンク

I***はチャンクと呼ばれて、以下でワンセットになっている。

  • 長さ
  • チャンクの名前
  • データ
  • CRC
チャンクの名前 なに
IHDR サイズとか、画像の情報
IDAT 画像データ本体。複数あっても良い
IEND おしまいを表す

画像データ本体が大きすぎたら分割されて IDAT が複数できるのかな(よくしらない)

わかりやすい PNG の話 for Web

フィルタリング

PNGDeflation 圧縮という圧縮方式みたいで、フィルタリングで工夫すると圧縮効率が良くなるらしい。フィルタリング形式は 0 から 4 まで 5 つあって、これは行ごとに好きなものを選べる。256 を法として modulo をとるので、255 を超えることはない。

フィルタリング形式 なに
0 None そのまま出す
1 Sub ピクセルとの差分
2 Up ピクセルとの差分
3 Average ピクセル・上ピクセルの平均をとったものとの差分
4 Paeth ピクセル・上ピクセル・左上ピクセルPaeth predictor したものとの差分

上に貼った事故画像は None と Sub を正しく実装したもので、1 行目だけ正しく表示されている。

Paeth predictor

Paeth predictor はざっくり言うと、左・上・左上のうちどれが一番近いかなーというのを調べる。縦方向と横方向で変化の小さいほうを選び、縦と横で全く違う感じに変化してたら中間として左上をとるような…

# a: 左
# b: 上
# c: 左上

def paeth_predictor(a, b, c)
  p = a + b - c
  pa = (p - a).abs
  pb = (p - b).abs
  pc = (p - c).abs
  
  if pa <= pb && pa <= pc then a
  elsif pb <= pc then b
  else c
  end
end

雰囲気こんなかんじで、これを R / G / B についてやる。

PNG Specification: Filter Algorithms

かんそう

たのしかった。気が向いたら、実装飛ばしてるところをもうちょっと書きたい。

ピクシブさんでお世話になりました

recruit.pixiv.net

この夏前半は pixiv SUMMER BOOTCAMP 2017 というものに参加していました。

応募

  • 春のインターンに受かってたんだけど、留学計画とか諸々の事情で都合が合わず断念した過去…
  • 夏は絶対行くぞと思っていて、 GitHub 選考で応募して受かった
    • 大雑把にアカウント貼り付けるだけで良かったので最高
    • 応募してから急に不安になって、意味もなく private にしていたリポジトリを public にしたり topics を追加したりそわそわしていた
  • 一次選考(通常 or GitHub)が終わるとオンライン面接がある
    • 普通にお話するだけかなぁと思っていたらその場でコード書いてって言われて頭が真っ白
    • 内容自体は新しい言語を勉強するときに1日目で当然やるような簡単な内容なんだけど、初めてだったものであわあわしていた
  • 総応募人数を聞いた、よく受かったなぁとびっくりした
    • 大体こういうところには高専生が数人いるものですが、今回は自分だけでした
    • かなしいよ〜〜 :sob:

やったこと

  • 初日は準備体操みたいに軽微な修正タスク
  • 2日目から4日目はそれぞれ課題を決めてやっていく感じ
  • 最終日は成果発表の資料を作っていた
  • 面接でデザインに興味ありますと言ったので、エンジニア出身のデザイナーさんにメンターになってもらった
  • 5日間で3回、30分ずつ Pawoo / インフラ / 基盤 についての講義を受けた

リリースされたもの

www.pixiv.net

f:id:yamasy1549:20170912115619p:plain

  • おすすめユーザーを作品中心に紹介するページをつくった
  • 自分が支部ライトユーザーで、ジャンルによらずひたすら作品を眺めたい気持ちがあった
    • ランダムな出会いを推していきたい感
    • それを実現させてもらえた感じで、うれしい
    • おすすめユーザーなんだけど、作品がメイン(作品が全体に占めるスペースが大きくなった)
  • 実装したいけど間に合わなかったところもある
    • 今は5作品しか見れないけど、同じユーザーの作品を横スライドでカルーセル的に見れるようにする
    • ユーザーの趣味に合う「おすすめユーザー」以外にも、「人気ユーザー」を出すタブをつくりたい
    • いつか実装されたらめっちゃうれしいです :pray:

技術的なやつ

  • React && TypeScript
    • React は普段使ってて TS もほんのちょっと触ったことはあったので、全く新しい技術が来てやべぇ…とならずに済んだ
    • でもバックエンドの PHP を書いて commit したのは初めてだった
  • 自分の良くないところがオープンになってウッ!ってなった
    • 既存のコードを読むのが下手でずっと同じところをぐるぐるしてたり
    • 命名が雑だったり
    • それでも生きてます!!!
  • これからもメンテしていく可能性があるコードなので、細かいところまでレビューをもらえた
    • うれしい
  • px 単位できっちり組んでいくのが楽しかった

ピクシブさんのすきなところ

「言語やフレームワークを統一する会社もあるが、そうしないのか?」

(pixiv 本体は PHP だけど他のプロダクトでは色々使ってる、という文脈で…)統一する動きはない。もしあるフレームワークを使っていて、それが死んだときにみんな一緒に死んでしまうといったことがないから。仮に PHP が絶滅しても他のプロダクトでイケてるものを使っていれば会社としては生き延びることができる。あと大事なのは「テンションのアガるやつを使う」

そのときどきで、チームとして効率よく速く価値を届けられる言語やフレームワークを選んでいるということでした。

エンジニアさんの勢いがつよい

エイってやってバーンHTTPS 化してしまったり、よっしゃやるぞって言って Pawoo ができてしまったり、技術力とエネルギーで殴りかかってる感じが超絶かっこよくて痺れます。憧れる〜

オフィスかわいい

とにかく賑やかだった。明るくてすき

f:id:yamasy1549:20170911205417p:plain

新宿御苑が近い

インターン期間中は会社の方でホテルを用意してもらえて、毎朝新宿御苑を抜けて通勤していました。緑いっぱいあるし朝は人が少ないです。ピクシブさんに就職する人は新宿門か大木戸門の近くに住んだら最高だと思います。¥2000で年パスがゲットできるので10日通えば元がとれます。

感想

  • 開発中にたくさんのイラストを見る→自分も描きたいなぁと思って、帰ってからペンを握る→挫折する(ループ)
  • 自分のよわいところがいたいほどわかった
  • pixiv 本体だけじゃなくて、他のサービスの開発の様子も見れたら楽しそうと思った
  • 講義では違う分野の話が聞けて勉強になった
    • 画像を大量に扱うのでそのあたりのサーバー構成のお話とか聞けて良かった
    • はやいすごい
  • 圧倒的猛者に囲まれてしあわせな5日間でした。このような機会をいただき、ありがとうございました!

デザイナさんがメンターだったのでそういうお話をできてめっちゃ良かった

  • 自社サービスをデザインするときに考えること
  • ユーザーが増えると、どの層にアプローチするかでやり方が全然変わってきて難しい話
    • 画面の向こうにはユーザーというかコミュニティーがいるみたいな責任感
  • デザインするのもエンジニアリングするのも、情報を整理するという点で同じ
    • 論理的だしパズル組んでる感じがする、エンジニアさんがデザイナさん的な仕事をするのも全然ありなんじゃないか?
  • サービスを見て「なんでこんなデザインになってるんやろ」を考えるのが好きならたぶんデザイナに向いてる
  • こういうお話大好きなのでもっと聞きたい!

やっぱりこれ

5日間は短かったです。力をつけて、いつかもうちょっと長い間ピクシブさんでお世話になりたいなぁなんて思っています。