Atomic DesignをベースにしたデザインシステムとCSS設計｜あっきー
自社サービス『ツクリンク』はリリースから7年が経ちました。 直近でAtomic Designをベースにしたデザインシステムの作成と、CSS設計の変更をしたので紹介します📛 CSSの変遷現在の設計の話をする前にこれまでのCSSを紹介。 Ver１ 初回リリース時 昔懐かしいCSSです。Sassも使わずベタ書き。 #main .articles p { } #main .articles .header { }実は今でも一部で生きています。反省してます。探さないでください。 Ver２ リニューアル リニューアルをしたタイミングでCSS設計にはMindBEMdingを採用、SCSSを使い格段に書きやすくなりました。ファイルはBlockごとに分け、クラスの衝突を防いでいました。 # _block.scss .block { &__element { &--modifier {} } } # ディレ
『ふりかえり』が開発チームを強くする｜あっきー
ハンズシェアでは２週間のスプリントを切りスクラムを組んで開発をし、スプリントの終わりにふりかえりをしています。『アジャイルレトロスペクティブ』を読んでふりかえり手法を改善した取り組みを紹介します。 これまでの『ふりかえり』これまでスプリントレトロスペクティブ（ふりかえり）をKPTのフレームワークを使い改善を行ってました。 KPTとは、Keep/Problem/Tryの頭文字を取ったもの １．Keep（良かったこと、続けたいこと）を出す ２．Problem（問題、開発の妨げになったこと）を出す ３．Try（Keepを更に良くする案、Problemを改善する案）を出す ４．Tryに投票し改善していくことを決めるKPTでのふりかえりをしている中で下記のような問題を感じていました。 ・KPTが形骸化 ・スプリントでやったことをそんなに覚えてない ・チームの問題発見・改善に対してクリティカルなものが
デザイナー×エンジニアで行う『ペアUI改善』のススメ｜あっきー
リリース前のちょっとしたUI修正をエンジニアがデザイナーとペアで修正したら、早くていい感じに進んだのでUI改善でも取り入れてみた話です。 UI改善する箇所は長くサイトを運営していると溜まってくる微妙な崩れや、いつか直したい案件のやつ。「なんか気になるを一掃するぞ！」とやってみました。 『ペアUI改善』の目的目的は以下のとおり。デザイナー・エンジニアの相互理解と、負債の解消がメインです。 ・チケットに上がりづらい余白・文字サイズ等のUI修正 ・数字に上がりづらいUXの向上 ・デザイナーがUIの修正方法を知る ・プログラマーが細部のデザイン意図を理解する『ペアUI改善』の流れ基本的にはペアプロと同じ流れを想定。 準備 ・対象のページを決める（今回は複数ページ） ・『気になるリスト』作成。なんか気になる箇所をまとめる ※気になるリストは日々上がるUI修正チケットとまとめておくと良さそう手順 １．
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
