scrapbook

webデザインの基礎スキル不足を実感していて、必要な経験を得るためにサイトのトレースをしました。 1pxのズレもない見た目の再現を目標にトレースしてみたら、見応えのあるボリュームになったので、まとめ記事とレポートを公開します。 レポート全ページのPDFは、ページ後半の「参考」コンテンツにあるリンクから閲覧できます。

今年、携わった案件のほとんどがレスポンシブwebデザインでした。今更ですが、私がレスポンシブwebデザインのコーディングでやっていることや気を付けていることを整理してみたいと思います。

私と同じように、web の可能性から説得しなければならなかった人たちが、「分からない」「今までと同じで良い」と言っていた上の世代と同じ態度になってきているのを見かけることがあります。

この記事は、「BASE Advent Calendar 2018」の21日目の記事です。 devblog.thebase.in はじめまして。2018年2月にBASE株式会社へデザイナーとして入社した小山です。 技術ブログを書くのは初めてなのですが、今回は私が2月に入社してから今日までネットショップ作成サービス「BASE」で「Sketchを用いたデザインシステム」を作ってチームでのデザイン作業を効率化した話について書こうと思います。 入社当時の状況 私が入社した当時、デザインチームは人数が増え始めた時期で、大きな課題が2つありました。 デザインデータの管理 私が入社する前まではプロダクトに対し…

これは「BASE Advent Calendar」16日目の記事です。 こんにちは、BASEのDesign Groupに所属している吉岡です。 先日BASE BANK株式会社初めてのプロダクトとして即時に資金調達ができる金融サービス「YELL BANK」をリリースしました。個人的にお金にまつわるデザインは初めての経験ということもあり、難しかったのですが、LPではAfterEffectsで作ったアニメーションをCanvasやSVGアニメーションにできるプラグインを使って表現しました。 今回はせっかくのアドベントカレンダーなので、下記の様なHolidayAnimationを書き出してみようと思いま…

デザイナーとエンジニアがお互いに深くコミュニケーションを取ってスムーズに開発できている状態を「なめらか」と呼んでいるのですが(さっき考えました)、そんななめらかな開発をするために必要な開発知識っていろいろあるよなと思います。 今回は1年ほどサービス開発をしてきた中でこんな知識があるとエンジニアとのコミュニケーションコストが下がって良い！となったものを自分のノウハウ棚卸しがてらまとめてみました。 前提としてはWEBプラットフォームで、駆け出しデザイナーというよりかはある程度戦いをこなしてきたデザイナーに向けてです。

マイクロインタラクションは端的に言えば「とても小さなやり取り」とも言えます。今回はマイクロインタラクションはよく知らない方やマイクロインタラクションは知っているけど実際にコードを書いたことが無い方向けにマイクロインタラクションの基本的な知識と実装方法についてご紹介します。

システムを開発する際にはオブジェクト指向（Object-oriented）という設計論があります。その設計論をUIデザインに導入することをOOUIと呼びます。今回の記事では、Appleの純正な写真アプリを分析・考察しながら、私なりにOOUIの理解を深めたいと思います。

「UXデザイン」という言葉が巷に出てから久しいですが、この本はUXを学ぶ一歩目としておすすめです。私の周りにはUXに明るい人が多く、色々な話を聞くのですが、正直、具体的にどのようなアプローチすれば良いUXを作れるのかが全く分かっていませんでした。しかし、この本を読みUXデザインの本質が少し見え、専門家の話も腹落ちできるようになりました。 仕掛学―人を動かすアイデアのつくり方作者: 松村真宏出版社/メーカー: 東洋経済新報社発売日: 2016/09/23メディア: Kindle版この商品を含むブログを見る Webサイトやアプリデザインをしている友人から、UX関連の相談を受けることがあるのですが、…

こんにちは、キッズリー開発グループ サーバサイドエンジニアの @t_uyama です。 本記事では、ローンチから三年間運用されているwebサービスにFLOCSSを導入して既存のCSSをリファクタリングしたという事例をご紹

Developers Boostで発表した資料になります。 https://event.shoeisha.jp/devboost/20181215/session/1899/ https://ota42y.com/blog/2018/12/01/developper_boost/