Storybook+AtomicDesignでデザイナーが開発に参加した話 | Nagisaのすゝめ
はじめに こんにちは、デザイナーの浜田です。 マンガZEROのWebリニューアルを担当することになり、AtomicDesignに則ってSketchでデザイン制作をしました。 そして今回デザイナーがAtomicDesignで言うAtoms/Molecules/OrganismsあたりのHTML/CSSを書いてみようという話になり、Storybookが導入されることになりました。 本記事ではデザイナーがStorybook+AtomicDesignを使って開発に参加してみてどうだったか、どのように活用ができたか、について紹介したいと思います。 デザイナー＆エンジニア間でStorybookが有用に使えそうかどうかの参考になればと思います。 ※本記事では、Storybookの環境構築やコードについての解説などは行いません。 AtomicDesignについては以前に弊社デザイナーが記事にしているので紹
Webpack使うならLaravel Mixでラクをする | codechord
Posted 7月 1st, 2018 by codechord. 0 Comments Tweet Tweet cssを書くとき、sass/scssを書きたくなる。 javascriptを書くとき、babelを使う必要が出てくる。 そんな時、おそらくGulpかWebpack、を使うことを強いられる。 最近は、フロントエンドの開発環境にWebpackを使うことが増えてきたけど、 そんな時は、Laravel Mixを使うとすごく便利。という話。 自分は、Laravel MixというWebpackのラッパーを使って楽している。 Reactでも、Vueでも、BabelでもSassでも、PostCSSでも思いつくことは基本的にできる。 Webpackって、設定ファイルを書くのが面倒。Webpackの設定ファイルはカオスになる。それをうまい事隠してくれる。 個人的に、過去、Gulp -> Webpa
[CSS]スマホで要素を高さいっぱいに表示したいのに、期待通りに表示されない時の解決方法
ビューポートを使った単位（vw, vhなど）は、特にスマホの各ブラウザにおいて複雑です。例えば、vwのスクロールバーを考慮する必要がありますか？ サイトのナビゲーションやページコントロールはどうでしょうか？ それらは計算に含まれますか？ スマホで要素をビューポートの高さいっぱいに表示したいのに、期待通りに表示されない時の解決方法を紹介します。 The trick to viewport units on mobile 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 ビューポートの高さ（vh）の仕様 高さいっぱいの要素を表示する方法 ビューポートのリサイズにも対応する ビューポートの高さ（vh）の仕様 W3Cの仕様では、ビューポートの単位をどのように計算するかは漠然としています。スマホでは高さが重要になることが多いので、ビューポー
![[CSS]スマホで要素を高さいっぱいに表示したいのに、期待通りに表示されない時の解決方法](https://cdn-ak-scissors.b.st-hatena.com/image/square/8a5cf0a3bb9540d4d9f77cfb193ce39e28e90836/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201803%2F2018080401-02.png)
CSSで長い文章を省略して省略記号を表示させる方法（1行 / 複数行 / mixin） - NxWorld
CSSを使って文章が長い場合に省略して末尾に省略記号（...）を表示させる方法のまとめです。 すべてp要素に対して適用するのを想定したコードで、全3パターンの実装方法と複数行対応させるスニペットを楽に使うmixinを紹介します。 1行の文章を省略 CSSで文章を省略させると聞くとまずこれを思い浮かべる人も多いと思います。 省略したい文章を括っている要素に対して下記のように記述することで、文章が長かったとしても1行に収まる形に省略され、文末に省略記号が表示されます。 複数行の文章を省略 #1 複数行の文章を省略して同じく文末に省略記号を表示させる方法で、省略したい文章を括っている要素に対して下記のように記述します。 省略させない行数は-webkit-line-clampの部分で指定し、このサンプルコードの場合は3を指定しているので文章が4行以上になってしまうときに3行目の文末で省略されて省略
A/Bテストを繰り返してわかったこと - astamuse Lab
デザイン部でフロントエンドエンジニアをしているkitoです。 今回は、A/Bテストについて書きたいと思います。 A/Bテストとは、例えば、AパターンとBパターンでそれぞれ色の違うボタンを用意し、どちらか一方のボタンを50%の確率でWebサイトに表示させることで、どちらの色のボタンがユーザーによりクリックされたか、よりコンバージョンに繋がったかを調べることができるテストです。 A/Bテストは多くのWebサイトで行われています。あなたがNetflixを訪れたとき、動画のサムネイル画像が前回の見たときと違っていることに気がつくことがあると思います。それらは進行中のA/Bテストか、もしくはテストの結果として表示されている画像なのです。 また、最近発売された『2万回のA/Bテストからわかった 支持されるWebデザイン事例集』という本には、日本の有名サイトがいかなる課題をもとにA/Bテストを実施して、
Leaflet — an open-source JavaScript library for interactive maps
an open-source JavaScript library for mobile-friendly interactive maps Leaflet is the leading open-source JavaScript library for mobile-friendly interactive maps. Weighing just about 42 KB of JS, it has all the mapping features most developers ever need. Leaflet is designed with simplicity, performance and usability in mind. It works efficiently across all major desktop and mobile platforms, can b
カエルコムニス株式会社 | ストレングスファインダー®の診断結果を活用して短所を長所にカエル
自分の可能性を最大化できる 最強の自己分析ツール「ストレングスファインダー®」 人はだれでも「習慣（無意識に繰り返される感情・思考・行動のパターン）」によって、モノゴトを細かく意識しなくても生きていける力を持っています。 そして、ポジティブな習慣は長所に、ネガティブな習慣は短所になります。この出方の違いは「自分のことを認められているかどうか」というシンプルな要因です。 自分自身を認める＋習慣を意識する という2つの条件があれば、人はグングン成長します。 ストレングスファインダー® は、この「ポジティブな習慣（才能）」を可視化して活用するための自己分析ツールです。 世界では200万人以上、日本でも70万人以上が受けているストレングスファインダーは、米国最大の調査会社であるGallup社＊の統計データに基づき、ビジネスのパフォーマンスアップのために開発されました。世界はもちろん、日本でも企業研
Google アナリティクスとGoogle スプレッドシートを連携する方法
ホームページやECサイトなどを運営している方にとって、無料でアクセス解析ができる「Google アナリティクス」は必須のツールです。ホームページのボトルネック発見と改善のため、毎日チェックしている方も多いのではないでしょうか。 デフォルトでも非常に便利なGoogle アナリティクスですが、同じくGoogleが提供しているサービス「Google スプレッドシート」と連携するとより便利に効率よく使用できます。 そこで今回は、Google スプレッドシートとGoogle アナリティクスを連携して効率よく解析するため、Google スプレッドシートのアドオン「Google Analytics」の基本的な使用方法を紹介します。 アドオン「Google Analytics」とは Google Analytics - Google スプレッドシート アドオン アドオン「Google Analytics」
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
CodeCode
The Blog | Welcome to Adobe Blog