Subscribed unsubscribe Subscribe Subscribe

CHROMA

Web Designer の頭から飛び出たアイデアの記録

Sketch でテキストをどう管理するか

f:id:thleap:20170425000712p:plain

結論としては、font-family だけ Shared Style で管理することにした。上のはやろうとしてダメだった例。

  1. タイプフェイスはシンボルで管理するのが大変。色やウエイト、行の方向まで管理するのが大変。Shared Style で管理してみる(同期は使わない形)
    • font-family だけシンボル化、とかしたい〜(これをシンボル化と呼ぶかはしらん)
    • Shared Style で管理してみた結果、あと戻りが非常に面倒な管理方法であることがわかった(一度 Shared Style で作成、各オブジェクトにスタイルを反映している途中で、Shared Style のもとのスタイルを変更したくなったとき、これがやりづらい管理方法であるということに気づいた)
  2. やっぱシンボルで管理してみる
    • やっぱいろんなバリエーションつくるのクソつらい
    • 「段落の途中でリンクテキストがきたらどうするん?」という問に対して解を持ち合わせてないことに気づいた
      • テキストのシンボル管理をやめた
  3. font-family を Shared Style で管理する
    • それ以外はしない

色と行方向の管理がもう、だめ。

やる記事スイッチどこにあるの

書きかけの記事、みたいなのが何本かある。
やらないといけないんだけど、怠惰にやられてしまう。

頭の中のアイデア、みたいなのもいくつかある。月曜日を楽しくする活動を始めようとしていることや、デザイナーにも得意・不得意分野がありそうって話(かっこいいとかわいいの 2タイプのテイストを作れる人はいるけど、かっこいいとシブいを作れる人はいないんじゃないか論)。

今日はこれ書いてるだけちょっとはやる気がある。このやる気は数分後に消滅するか、再燃して上記なんらかの記事になる。

実例から学ぶ CSSアニメーション

DIST.15 「アニメーションで差を付ける演出とデザイン」 に参加して、LT をする。

なぜ LT をするか

CSS Transition や CSS Animation の使い方がわかっても、実際に活用するイメージが限定的な場面でしか思いつかなかった。

たとえば、CSS アニメーションを使うシーンとしてはリンクやボタンのマウスオーバー、ローディングとかまではイメージつくけど、その先が思いつかない。また、Codepen とかにあるデモは見た目は派手で格好いいけど、活用シーンが限られていたり、まったく現実的じゃないものが多い。

この状態では日々の製作に活かしづらいと思ったので、今回の LT を通して、CSS アニメーションに対する自分の視野を広げてみようと思った。

資料

speakerdeck.com

デモ

  • 認知補助
    • Backlog ぽいやつ
      • アニメーションの効果で、ログインボタンからダイアログがでてくるのがわかりやすくなります。矢印の装飾をつけるだけよりも、ダイアログがどこからでてきたか記憶しやすいです。
      • DEMO
  • つなぎ
    • Medium ぽいやつ
      • ページを読み込んでから画像表示するまでの退屈な時間を、ぼかしのアニメーションを使ってつないでいます。「見えそうで見えない」状態を作ることで、画像への注目度もあげています。
      • DEMO
  • ただの演出
    • おそ松さん ぽいやつ
      • ブルブル演出です。サイトの印象に関わります。
      • DEMO

デザイナーとして、何者になりたいか #3

前回の続き。

前回は、社会に対して自分が「個々の進化を助ける」ことに貢献したい、という話をした。

今回は、ここからより身近なフィールドに舞台を移し、考えてみる。

同じ職場で働く人、同じ仕事をしてる人にどんな価値を提供したいか

進化というのを、職場でよく聞くキーワードに置き換えたらスキルアップという言葉になると思う。で、このスキルというのは職種によって違うものと、そうでないものがある。例えば以下のように。

職種によるもの:

  • デザイン
  • プロジェクト進行
  • プログラミング
  • マーケティング
  • ライティング
  • サービス設計

一般的なもの:

  • コミュニケーション
  • タスク管理(時間管理)
  • 目標管理

では、どのようにしてこれらのスキルアップを助けることができるか?

「職種によるもの」に対しては、あまりできることはないと思う。専門的な能力になるため、僕が持っている能力を使ってもらうのが難しい。それでも一つ上げるなら、"デザインの考え方を理解してもらうことで、各分野のフィールドで役立ててもらう" というのはあるかもしれない。 たとえば、言葉だけじゃ伝わりにくい企画をペーパープロトタイピングなどのイメージを通して伝えること、など(これは具体的すぎて考え方というより手法だが)。

「一般的なもの」に対しては、そもそも曖昧なものが多い感じがするので、なんでも助けられる気になってる。しかし、大きすぎてどう助けたらいいのかわからない。コミュニケーションとか… これだけでサービスになったりするし(チャットとか)、タスクも同じ。


あかん。考え始めるところ間違ったみたい。

同じ職場で働く人、同じ仕事をしてる人にどんな価値を提供したいか

これ、次の機会にまた最初から考える。

CSS アニメーションを勉強する

まずは。

学ぶ

動きをイメージする

デモを見たり簡単な方法でアニメーションを動かしながら、作りたいものをイメージする。

  • Animate.css
    • サイトを見るだけでも、アニメーションの名前と動きを覚えるのに役立つ
  • CSS3 Keyframes Animation Generator
    • ジェネレーターを使って、アニメーションを作りながら動きを確認できる
  • Learn CSS Animation
    • CSS アニメーションが使われてるサイトを見る(これが良いかどうかは知らん)

リファレンス

デザイナーとして、何者になりたいか #2

前回の続き。

前回は何も考えず思いついたことを書いた。あれじぁ答えにたどり着きそうにないので、ちょっとやり方考えた。

こんな感じで上から考えていって、「4. そのとき自分は」のところで結論だそうと思う。

  1. 社会にどのように貢献したいか
  2. 同じ職場で働く人、同じ仕事をしてる人にどんな価値を提供したいか
  3. 家族、友達にはなにを提供したいか
  4. そのとき自分は
    • 持ってるスキル
    • お金

この 1234 もいくつかの記事に分かれる… 。

社会にどのように貢献したいか

「個々の進化を助ける」

個々の進化を助けた結果、健全な社会ができると思ってる。

ぼくは “進化” を「停滞せずに一歩進もうとすること」と捉えている。成功しようと行動することが大事で、結果的に失敗してもそれは失敗を学んだという意味で進化だ。

また、社会全体でみると、データから紙に戻ろうとすることは進化とはいえないかもしれない。紙は処分しなければいけないゴミをだすこと、これだけ考えても地球やそこに住む人々にとって良いことではないだろう。

しかし、ぼくはこういった人こそ助けたい。人類の未来は(言ってることがデカくなってきたぞ)、"人間" ってひとまとめに言えないくらいオリジナルが増えて、それぞれ個性を活かした生活をして、自分自身でその生活を幸せに感じられる未来になればいいなと思っている。

さっきのゴミの処分の話だけど、たとえ紙を使う人が増えたことでゴミの量が増えたとしても、人の個性を伸ばした未来ではいい感じにゴミをエネルギーに変換できる何かが生まれているかも。それかゴミを安全にきれいさっぱり跡形もなく処分する技術か、地球を捨てて別の星に行く技術か、人間の細胞を変える技術か。

かなり手前勝手な意見だけど、社会の目が自分が本当にやりたいことの邪魔をするなら、社会なんて気にせずにやりたいことをやればいい。  

この「なんとかなるさ論」は正しいかわからないけど、正しい可能性はある。であれば、社会全体に合わせてみんな同じ方向を向いた未来よりも、バラバラでもなんかうまくいってる未来のほうがぼくは楽しそうに感じるし、その未来に向けて自分の能力を活かしたい。

また、「助ける」というキーワードをいれたのは自分がデザイナーだからというわけではない。いま一番能力を発揮できるのはモノをデザインすることだろうが、言葉で人を助けてもいいし、(物理的に)手を貸すことで助けてもいい。

最後に、人の進化を助けることの最低条件は、自分自身の進化にもつながるものであること、としたい。

デザイナーとして、何者になりたいか

一年に一回くらいはやってるな、これ。つまりよく自分を見失ってるわけだけど、今年もやる。

考えることが多そうなので、記事はいくつかに分ける。

何を作りたいか

「一目惚れするほど魅力的、使い始めに説明書いらず」、こういったものが作りたい。

たとえばこういうのが作りたい。

  • 落ち着いた見た目に惹かれて買った Nexus5X、発売から数年経った今もこれ以上に魅力的な見た目の携帯は見つからない。最初にした設定はいくつか個人情報いれたのと Wi-Fi の設定しただけで、あとは自分のペースに合わせてアプリをいれるだけ
  • Paul Smith の赤の長財布。これぞ一目惚れ。赤い革の色合いは自分の年齢の経過とともに落ち着いてきて、ちょうどいい。お札やカード、小銭をどこに入れたらいいかなんて、すぐわかる(財布だから当たり前!)
    • 陶器、PS2、64

たとえばこういうのは作りたくない。

  • 雑貨屋さんでアッ!と思うものを見つけて、手にとってみるとたしかにステキなんだけど、何に使えば良いかわからないから棚に戻す
  • 機能が豊富で買ったデジタルカメラ、PCと連携して使うつもりだったのに、設定でつまづいて放置

機能をデザインしたいか

ここで言ってるのは、「使いやすい」を実現するために用意する機能、そういうのもデザインしたいかという話。結論としてはデザインしたい。

たとえば機能までデザインされたものとして、iPhone があると思う。あれは機能を先に作って、それに “デザインあてる” やり方では作れないと思う。

すべてのケースで機能までデザインできると思ってないけど、できることなら機能まで口を出していきたい。作った機能をユーザーにどこまで提供するか、そもそもその機能はいるか、など。