Vue.jsとAtomicDesign - Qiita
最初に この記事はVue.jsが最近のマイブームな若造フロントエンドエンジニアが、 コンポーネントの再利用性とイベントバケツリレーの煩雑さの間でもがき苦しみ AtomicDesignなるものに行き当たった結果、 これをVue.jsで実現する方法を考え書き綴ったものです。 Vue.jsやVueコンポーネント、Vuex / Vue Routerとはなんぞやという部分については 適当に触れる程度にわかってる前提で話を進めます。 そもそもQiita初投稿になるので文章の読みにくさなどはこっそり指摘をください。 経緯 個人開発のアプリケーションで、SPAを作ってみようと思い至る ↓ Vuex / Vue Routerを考えなしに導入 ↓ 再利用性のなさに絶望 ↓ ページごとに必要なデータを揃えるだけの親コンポーネント作る ↓ イベントバケツリレーに辟易 だいたいこんな感じです。 「イベントバケツリレ
Vue.js からみた AtomicDesign
この記事はVue.js #3 Advent Calendar 2017の13日目の記事です Atomic Design自体の記事は色々ありますので、この記事ではAtomicDesignで設計したコンポーネントをVue.jsで実際に運用してみて感じた事をまとめてみました 実際にどんな感じになるか結論から言うと、AtomとMoleculeにStoreを持たせず。 OrganismsとTemplateあたりの粒度でStoreを利用するとIA的にも収まりがいい様に思えます。是非デザイナーにツッコミ入れましょう。 VueコンポーネントをAtomicDesignで実装するとだいたいこんな感じになります。Atomの役割色・タイポ・ボタン固定文言など 直接描画要素にデータをレンダリング描画要素のイベントを発行親要素からのデータ受け取り登場箇所がすごく多いのでステートレスを徹底するStoreみちゃダメ絶対！
Vue.js × Atomic Design 【Vue.js Advent Calendar 2017 5日目】 - it's an endless world.
この記事はVue.js #1 Advent Calendar 2017の5日目の記事です。 昨日はakifoさんのエラーをユーザーへ伝えるVue.jsコンポーネント作りましたの記事でした。 本日は私がAtomic Designの概念を用いてVue.jsのコンポーネントを組み立てるというお話をさせていただきたいと思います。 コンポーネントって何？どう使うの？ 公式ドキュメントにも記されている通り、コンポーネントはVue.jsの最も強力な機能の1つです。 UI上の各要素をパーツ化し、それぞれのパーツの中にHTML(意味)・JavaScript(機能)・CSS(見た目)を含めることが可能です。 これにより再利用性も高まりますし、プロジェクトのリソースを整然と管理することが可能となります。 例えば、ヘッダーをコンポーネントとして使いたい場合。 次のようにMyHeader.vueを作成し、それを他の
Atomic Designを分かったつもりになる
「Atomic Design」（アトミック・デザイン）という言葉がしばしば聞かれるようになってきました。実際にちょっとしたトライアルをしつつ、Atomic Design について考えてみました。
これでもう悩まない！2017年のデザイントレンド完全ガイド
2016年も毎年と同じように、デザインについて新しいことを学んできました。今回は、ウェブからグラフィックやロゴデザインまで、デザイン全般に関する2017年のトレンドを掘り下げてみていきましょう。 デザイントレンドはメディアやテクノロジー、ファッション業界、そして最近では「使いやすさ」を追求するユーザビリティーなどに影響を受けています。トレンドは徐々に細かく枝分かれし、いつの間にか同じように消えていきます。 基本的にデザイントレンドの寿命は1〜2年。2017年のデザインは、2016年のトレンドを引き継いだものとなり、雰囲気もここ数年よく利用され、親しまれているものと言えるでしょう。Google マテリアルデザインの影響力は今年も強く、対応にはいくつかの変更が必要になります。 Adobe が2017年デザイントレンドを発表！確認しておきたいポイントとは？ 2017年のWebデザインはどうなる？
Freebie: Google Material Design Shadow Helper
One of the things that Google revealed at the Google I/O 2014 was the new visual language for all their apps, services and Android OS — called material design. Together with the keynote they released a living style guide.I am impressed by the attention Google pays to all the details in their guide. I was especially impressed by the section on shadows which are used to define different layers and t
Material Design Box Shadows
About HTML Preprocessors HTML preprocessors can make writing HTML more powerful or convenient. For instance, Markdown is designed to be easier to write and read for text documents and you could write a loop in Pug. Learn more · Versions Adding Classes In CodePen, whatever you write in the HTML editor is what goes within the <body> tags in a basic HTML5 template. So you don't have access to higher-
改めてWebサイトの品質について考える
制作における品質とは？ Webサイトにおける品質（クオリティ）とはどういう意味でしょうか。 制作者であれば同じように捉えているかのようにみえる言葉ですが、大きく 2 つの見方があると思います。ひとつは、様々な状況に堪えられるように必要最低限の見た目と操作性を保証するという意味での品質。もうひとつは、与えられた状況の中で最高の見た目と操作性を実現するという意味での品質です。どちらも「品質」という言葉で表現できるものの、見ている方向は大きく異なります。 品質に対する捉え方の違いを考える上で スターバックスの日本サイトと、米国サイトは良い比較になります。いずれもレスポンシブ Web サイトですが、スマートフォンとデスクトップで見た目を大きく変えている日本サイトに対して、米国のアプローチは極めてシンプルです。アイコンの使い方やグラフィックも日本語版のほうがバラエティに富んでいますし、ナビゲーション
安全でアクセシブルなアイコン・フォント
Translation of: Bulletproof Accessible Icon Fonts by Filament Group アイコン・フォントを利用する場合、あらゆるユーザーに適切にアイコンを提供しようとすると、かなり気をつける必要があります。そのフォントが読み込まれなかった時にどうなりますか？@font-faceがまだサポートされていないブラウザーでは？ どうすれば安全に(bulletproofに)アイコン・フォントを利用できるかをこれから解説したいと思います。 効率的で機能的なウェブサイトを制作するという、この終わることのない探求において、ベクター形式のアイコンを提供する手段として、簡便であるフォントを利用することが何度も提案されてきました。対して私達は通常ベクター形式のアイコンとしてSVGをIan Featherがブログ書いたような理由から選んで(また、薦めて)おり、既に
AMPコンポーネントの使用方法とその効果 | フロントエンドBlog | ミツエーリンクス
以前投稿したAMP対応でモバイルユーザーを獲得するという記事で、AMP対応においてサイトの機能性やデザインの再現性への影響が大きいと思われる制約の一つとして、「AMP JS以外のJavaScriptの記述と読み込みの禁止」という項目があることをご紹介しました。今回はそれを補うための手段をご紹介します。 AMP JS以外のJavaScriptの記述や、読み込みが禁止されていることによる影響の大きさはサイトによって様々ですが、jQueryやlodashなどのライブラリやフレームワーク、スクラッチで開発したJavaScriptファイルを読み込むこと、script要素を用いてHTMLソース内にJavaScriptソースを記述することも禁止されています。 AMP HTMLでカルーセルやアコーディオンメニュー等の機能を実装するためには、AMPコンポーネントを使用します。 AMPコンポーネントとは、外部
フロントエンドも気にかけたいUI/UXの話。LIGブログのドロップダウンメニュー実装で気付いたこと | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
LIGブログの中の人、ゆたろです。どうもです。 フロントエンドの皆さんは、サイト上に新たに機能を実装する際、UI/UXをどのくらい意識していますか？ UI/UXはデザイナーさんの領域、と思いがちですが、フロントエンドも意識をすることで、より無駄なく・効果的なサイトの制作に役立ちます。 今回は、少し前のLIGブログ上にあったグローバルメニューで実際に上がった、フロント領域でのUI/UXの問題点と、それに対しての改善の一例を紹介いたします。当記事を通して、UX改善方法の参考、UXを意識した実装をするきっかけになればと思います。 変更前のグローバルメニューってどんなのだっけ？ https://web.archive.org/web/20160422094831/https://liginc.co.jp/（※） こちらが、今年の4月後半にリリースされた、ドロップダウンの付いているグローバルメニュー
UIデザインの引き出しを増やしたいときや悩んだときに参考になるデザインギャラリー 20 - NxWorld
webサイトやアプリなどのUIデザインに悩んだときに参考になるデザインギャラリーを全20サイト紹介します。 よくあるコンポーネントのデザインや配置の仕方、カラーの組み合わせ方を眺めるだけでなく、ギャラリーによってはクールなものからユニークなものまである様々なアニメーションをまとめているところもあるので、デザイン以外の部分でも参考になるギャラリーもいくつかあります。 また、悩んだ・困ったときに見るだけでなく、お気に入りのギャラリーがあればブックマークやフィード登録などして普段から空いた時間に目を通すことでデザインの引き出しも増やせますね。 Calltoidea 細かいコンポーネントからページ全体のレベルまで様々なデザインがまとめられています。 カテゴリーを表すアイコンもわかりやすく参考デザインのキャプチャも大きくて見やすいので、個人的によく見るギャラリーサイトのひとつです。 Collect
歴史から考えるフラットデザインとマテリアルデザインの違いとは？
もし私がこれから、フラットデザインとマテリアルデザインの違いが視覚上ごくわずかであると発言しても、不愉快にならないでください。 実際、この話題についてあまり知らない人は、どちらのデザインに対しても、とても良く似ていると思うかもしれません。今回はこの問題を解決するために、両方のデザインにおけるアプローチの違いに焦点を当ててご説明します。 マテリアルデザインにいたる歴史 二つのデザインスタイルについての長い議論を始める前に、それぞれのデザインが持っているルーツを見つけることは理に適っています。多くの人がマテリアルデザインはフラットデザインをベースにしていると信じています。 しかし、どのようにして我々はフラットにたどり着いたのでしょうか？ スキューモーフィズム UIとウェブデザイン用語でスキューモーフィズムは、現実世界にあるものを模倣するアプローチを指します。アップルのリアルな質感、明るさ、派手
Hamburger menu alternatives for mobile navigation
If you’re working on digital products, you have already read dozens of articles describing how and why the hamburger navigation on mobile (and desktop!) hurts UX metrics due of its low discoverability and efficiency. (You can read some of best articles on the topic here, here, here, and here.) Luckily, more and more sites and apps are experimenting with alternative, more efficient solutions for th
CSSによる両端揃えの問題点とその解決へ向けて - Weblog - Hail2u.net
日本語の文章の場合、両端が揃っているとおさまりが良い。CSSではその両端揃えを行うためにtext-alignプロパティーにjustifyという値が用意されている。完全に日本語だけの段落ならほぼ100%、和欧混在の段落でも9割以上の段落で想定通り機能するが、まれに無残な結果になる。それは自動折り返しで長めの英単語が行頭に来る場合だ。 両端揃えは文字と文字の間を開けることで行われる。日本語だけの段落の場合、ほとんどどこでも改行することができる上、行送りの禁則処理が起こっても最大2文字分なので、行の長さが十分にあればその調整は認識されないだろう。問題は和欧混在の段落だ。 Demo: Justifying Problem この「contemporary」くらいの長さの単語だとまだマシな方で、あまり問題が起こることはない。しかし、このウェブサイトのようにcompareDocumentPosition
2017年に人気となる、知っておきたいUIデザインのトレンド8個まとめ
アプリデザインのトレンドは絶えず変化しています。時間が経てば消えてしまうものから、成長し、進化を続けるものもあります。多くのトレンドは検討する価値がもちろんありますが、一緒に新しい技術も必要となります。 優れたUIデザインは、シンプルさ（英: Simplicity）と有効性（英: Effectiveness）が全てです。これこそがデザイナーが機能性を達成しようとする理由です。しかし反対に、もしユーザーがアプリをうまく使いこなせないとき、UIデザインは失敗と言えるでしょう。 デザイントレンドが変化する理由にはさまざまな要因が考えられます。たとえば2015年の大きな流れとして、ハードウェアの変化やモバイル端末のレスポンシブ化が挙げられます。 公開された多くのモバイルアプリは、人気のある機能を必需品としてすぐに変化させてきました。さらに今では若者のおよそ90%が、モバイル端末上で基本的な操作を行
ホバーが好きすぎるエンジニアが選んだ “至極のホバー表現” 10選 【2016年10・11月版】！ | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
10枚の同じ服を着まわしているフロントエンド兼ミニマリスト、ザワです。はじめまして。 webでのデザインやアニメーションなどの表現がリッチになっている昨今。今回は、webサイトでのユーザーインタラクションの代表格であるホバー表現に注目し、過去にホバザワとの異名を授かったことのある私がチョイスした、魅力的なサイトをご紹介します。 Space Advisor http://www.space-advisor.ca/en/?experience ホバータイトル： 宇宙はlinear 勝手な解説： 惑星の周りを周回する衛星の様子を表現したアニメーションが、ボタンにホバーすることで表示されます。ボタンを構成する要素にはcss animationのanimation-iteration-countをinfiniteに設定し、イージングをlinearにすることで無重力空間が表現されています。サイトの世界
５つのデザインコンセプトから学ぶマテリアルデザイン
マテリアルデザインは、Googleが提唱するメタファーに基づいたデザイン手法ですが、多くのアプリに適用されだしています。 マテリアルデザインの第一の目的はユーザーを幸せにすることです。 デザインのあらゆる側面（色、タイポグラフィ、ビジュアル、マルチメディア、構造など）は、ユーザーが欲しいものを即座に得られるような快適な環境を作り出し、且つ心地よくそれが実現することを手助けするべきなのです。 マテリアルデザインでは、次のことが求められます: ユーザーインターフェイスは直感的ですっきりしている 情報の階層構造は明確でわかりやすくすべきである 全ての構成要素は配置・目的ともに必然であるべきである。飾りとして使われるアニメーションでさえも、意図や関連性を持つべきである 今回はUpLabsでキュレーションしているデザイナーによるギャラリーの中から、これらのガイドラインと各デザイナーの考える最適解が組
Alertbox: 映画の中のユーザビリティ -- 間違いトップ 10（2006年12月18日）
映画の中のユーザインタフェース（UI）は、現実のそれよりもエキサイティングで、ヒーローたちは、なじみのないシステムを現実よりも遙かに簡単に使いこなしてしまう。 Usability in the Movies - Top 10 Bloopers by Jakob Nielsen on December 18, 2006 ハリウッドが表現するユーザビリティは、間違いだらけだ。ここではその中でも、最も著しいものをとりあげる。 1. ヒーローはどんな UI でもすぐに使いこなせる 企業に侵入する。外国の場合もあれば、異星である場合もある。そしてコンピュータの前に立つ。UI の操作方法を理解し、初めてみるアプリケーションを使えるようになるまで、どのくらいかかるだろうか。映画スターの場合は、1 分もかからない。 映画で最も現実離れしたコンピュータの表現は、どのインターフェイスもみた途端に使いこなせると
ディズニー社に学ぶ！HTML/CSSで12個のアニメーション基本原則を完全再現！ - CSS Animation
ディズニー社に学ぶ！HTML/CSSで12個のアニメーション基本原則を完全再現！ フロントエンド・デザイナーやデベロッパーは、スタイリングや配置、またデザイン性の良いサイトを作成するために CSS（Cascading Style Sheets、カスケーディング・スタイル・シート）を利用します。しばしばページに変化（英: Transition）やアニメーション（英: Animation）を加えるために CSS を利用しますが、まだまだ開発する余地がありそうです。 アニメーションは、訪問ユーザーにとってデザインをよリ理解しやすく、ためになる情報を伝える強力なツールとなるでしょう。ウェブサイト制作で活用でき、よりパワフルな使い方ができる基本原則を今回はご紹介します。 ディズニー社の現場で長年培われた、アニメーションの基本原則 12 個（英: 12 Principles of Animation）
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
