ajinorichanのブックマーク - はてなブックマーク

デザイン力を上げるトレースのいろは
こちらの記事はこの記事の転載です。はじめに以前（2年半前、当時学生）、Webデザインの勉強中にトレースの記事を書いたことがありました。こんなサムネイルを見たことがある人が居るかもしれません..。（記事は昔のものなのでリンクは貼りません）なぜかこの記事が未だにじわ伸びし、noteで紹介されたりしており、「まずい..」と思ったため新たに記事を書くことにしました。ちなみにサーチコンソール見ても「Webデザイントレース」の検索が多く、勉強したいけどやり方がわからない人が多くいるんだなと再認識しました。学生の時の私もまさにそれで、デザイン系の学部に通っていたため「じゃあデザインできるんだね！」的な印象を持たれがちでした。でも大学ではWebやアプリのデザインの授業があるわけではないので、その辺は独学だったり、アルバイト先のデザイン事務所で教えてもらったりで勉強していました。トレースは
ajinorichan 2018/08/20
デザイン

webデザイン

入門
リンク
「いらすとや」を本気でSpineアニメーションさせてみた | Nagisaのすゝめ
そうだ！いらすとやを動かそう！！こんにちは。にしやまです。突然ですが、皆さんは「いらすとや」をご存知でしょうか？某大型家電量販店の店内ポスターに使用されていたり、SNSで拡散されたり、目にする機会が多いのでご存知の方も多いかと思います。可愛いイラストのフリー素材サイトなんですが、中には「こんなのいつ使うんだろう」っていうようなネタ画像もあって見てまわるだけでも面白いです。こんなのとか。こんなのまで。ある日のことです。いつものように「いらすとや」を巡回していたぼくはふと思いました。この愛すべきゆるキャラ(？)たちがイキイキと動いているところを見てみたい！それも超ヌルヌルに！！…と。というわけで、今回はSpineを使って「いらすとや」をヌルヌルと動かしていきます！ ※Spineについては前回の記事「Spineを使って２Dキャラクターを３Dのように動かす」を参照ください。ま
ajinorichan 2017/11/20
アニメーション
リンク
[動画解説付き]デザイナーがUI実装時に伝えるべき5つのSketchTips！〜エンジニアの困っている声に応えました〜 | Nagisaのすゝめ
2017年10月11日 [動画解説付き]デザイナーがUI実装時に伝えるべき5つのSketchTips！〜エンジニアの困っている声に応えました〜 Sketchで困っているコトがないかエンジニアに向けた社内アンケートを実施こんにちわ、デザイナーリーダーの川畑です。現在NagisaのUIデザイン開発では主にデザイナーがSketchで制作し、エンジニアが参照しながら実装しています。今回は更なるエンジニア-デザイナー間の効率良い伝達のために、Sketchを参照する上でエンジニアが困っていることをヒアリング→デザイナーチーム全員で解決策を回答したので、記事として公開したいと思います。 Sketchの基本的な操作や機能は理解しているが、もっとうまく使いこなしたいデザイナーやエンジニアの参考になれば幸いです。こちらの困っている声に応えました Lineheightが設定されたテキストボックスのマー
ajinorichan 2017/10/22
sketch

ui
リンク
Sketch LibrariesとAbstractを使ったAtomic Designの実践💪 | Nagisaのすゝめ
はじめにこんにちは！社長室インキュベーションチームで新規サービスのデザインを担当しています田村です。先日、デザイナーリーダーの川畑が執筆した記事にある通り、Nagisaではデザイン手法としてAtomic Designを採用しています。 Atomic Designは、コンポーネント指向のデザイン手法です。コンポーネント指向はパーツの再利用と効率の良い運用を可能とし、デザインの追加・変更が容易であり作業の効率化に繋がります。また、React Storybookなどを使用すれば「あのボタンがない」「カラーが違う」などの実装段階での抜け漏れも防げますし、デザイン変更のハードルも下がるかと思います。コンポーネントの粒度がしっかりと定義できていれば、エンジニアさんとの共通言語が増えてコミュニケーションの質が高まることも期待できます。このようにAtomic Designはデザイナーの作業効
ajinorichan 2017/10/22
atomic design
リンク
1