The Newsletter for Unicorns 🦄 5-minute bite-sized weekly newsletter for design-savvy front-end devs and code-loving UX/UI designers. Filled with the best hand-picked resources. 100% free.
Inside Frontend #2 / 動的デザインガイドラインのつくり方 / Masanari Hamada @nairirou / #InsideFE
こんにちは!2016年に新卒で入社した、SUUMOのフロント開発グループでエンジニアをしているやなぎさわです。 入社早々SUUMOのCSSを再設計をする機会があり、CSS/SASSのスタイルガイドを研究していたのですが、JavaScriptのスタイルガイドで有名なAirbnbがCSSのスタイルガイドを公開しているのを見つけました。 一人で開発していたり、CSS/SASSを書く人が少人数である場合は意外とその重要性に気付きにくいのがこのCSS/SASSのコーディング規約です。CSSは単純な言語であり単にスタイリングを当てるだけであればわりと簡単にできてしまうのですが、大規模開発や修正が頻繁に必要となる運用フェーズになるとその単純さがゆえにバグを作り出しやすくなってしまいます。 特にCSSでは全てのセレクタのスコープがグローバルであり、気を抜くとすぐにクラス名などが被ってしまいます。BEMとO
ZackはUXPinのUXデザインライターです。彼の仕事はUX Magやawwwards、 Speckyboyで出版されています。 デザインシステム、パターンライブラリ、スタイルガイドという言葉が、同じような意味で使われていることがあります。 これら3つのコンセプトには繋がりはあれども、決して同じものではありません。 この記事では、定義を明確にして、それらがどのように繋がっているかを視覚化します。そしてデザインシステムを構築するための、主なガイドラインについて紹介します。 デザインシステムの定義 まず直接の定義を理解しましょう。そうすることで、これらの概念がどのように繋がっているかを学び、より良い製品作りに活用する方法を考えることができます。 デザインシステム―デザインの基準やドキュメント、原則、および基準を達成するためのUIパターンやコードコンポーネントなどのツールキットを、すべて含んだ
A collection of identity style guides from around the worldSee the grids, layouts, and details designers include in brand identity style guides for clients worldwide. Browsing identity style guides helps me learn what to include for my clients, so I collated a number of samples for reference. I hope you find the resource helpful, too. Audi CI Belfast brand identity guidelines Berkeley brand identi
2012年から激変の時代となったSEO業界。最近では、パンダアップデート、ペンギンアップデートの更新が立て続けに行われました。 これらのアップデートにより、スパムと呼ばれる違反行為に関する監視の目は厳しくなり、Googleが目指すユーザーにとって有益な検索結果を表示する傾向が、より一層近づきました。 運営者自身は悪意がなかったにも関わらず、実はスパムに該当する行為を行っていたことでペナルティや順位が下落してしまったというケースも少なくありません。 そのため、SEOにおいてGoogleの動向をチェックすることはもちろんですが、ホームページを運営するうえで守るべきルール(ウェブマスター向けガイドライン)は公式にも公表されているため、運営者であれば必ずチェックしておきましょう。 今回は、Googleが定めるウェブマスター向けガイドラインの解説と補足情報を追記してまとめました。 ※Googleが公
ガイドラインチェックの仕事って何をするの?私がちょうど入社した年に、コニカミノルタの全世界のウェブサイトを一斉にリニューアルしました。当時、私の指導役のメンターが担当していた、ウェブサイトの“ガイドラインチェック”という仕事をサポートしたのがきっかけで、ガイドラインに触れることになりました。 では、ガイドラインチェックのお仕事って何をするの? ということですが、私の部門では、ウェブサイトリニューアルに伴って、次の2つの基準をもとに、チェック表を作って全世界44カ国、76サイトの「ガイドラインを守っているか否か」のチェックをしました。 デザインの統一感WCAGの適合度合い※※WCAGとはウェブコンテンツ・アクセシビリティ・ガイドラインのこと http://www.jsa.or.jp/stdz/instac/commitee-acc/W3C-WCAG/WCAG20/ たとえば、次のようなことを
1 概要 より良い授業づくりや研鑽のためには発信とそれへのフィードバックが必要です。各種SNSやEDUPEDIAのようなネット上の「場」で自分の実践を共有し、離れているところにいる人からのアドバイスや感想も得やすくなりました。 そして、北海道から沖縄、さらには海外にいる方も巻き込んで、より広い範囲で実践研究ができるようになりました。けれども、色々と敏感になっているこのご時世にはちょっとしたことでトラブルも起きかねません。 そこで、どのように気をつければ教職員が安心してインターネットやソーシャルメディアを使えるかが学べるガイドラインを紹介します。ダウンロードや印刷をして、教員研修などでお使い下さい。 「TwitterやFacebookに代表されるソーシャルメディアは、私たちの生活において欠 かすことができない情報伝達手段となりつつあります。児童・生徒へ情報モラル教育の一環として注意喚起を行う
iOS Design Themes As an app designer, you have the opportunity to deliver an extraordinary product that rises to the top of the App Store charts. To do so, you'll need to meet high expectations for quality and functionality. Three primary themes differentiate iOS from other platforms: Clarity. Throughout the system, text is legible at every size, icons are precise and lucid, adornments are subtle
This webpage was generated by the domain owner using Sedo Domain Parking. Disclaimer: Sedo maintains no relationship with third party advertisers. Reference to any specific service or trade mark is not controlled by Sedo nor does it constitute or imply its association, endorsement or recommendation.
1. ガイドラインの目的 本ガイドラインは、ウェブコンテンツ(ウェブアプリケーションを含む)をJIS X 8341-3:2010に対応させることを要件として発注する際に、調達仕様書、提案依頼書(RFP)などの書面に明記すべき事項を示すためのものである。 昨今、民間、公的機関を問わず、JIS X 8341-3:2010への対応を促進することを目的に、明示すべき情報が不足した仕様書等が見受けられる。この状況を踏まえ、発注する前に検討しておくべき事項について、発注者が要件を定めやすいように具体例を交えて解説するものである。 2. 発注時に検討すべき事項 次の各事項について検討した上で、書面に明記する。 なお、国及び地方公共団体等の公的機関のウェブコンテンツ(公式ホームページ、団体が提供する関連サイト、ウェブシステム等)については、総務省の「みんなの公共サイト運用モデル(2010年度改訂版)」(以
※この記事は英語文書を翻訳したものです。 Building Smartphone-Optimized Websites – Webmasters — Google Developers (訳者 2014/7/1追記:Googleのスマートフォンサイトの移行ガイドラインを元にしたスマホサイトの移行のポイントも合わせてご参考ください。) Googleがサポートするスマートフォンに最適なサイトの構成は以下の三通りあります。 【Google推奨】レスポンシブウェブデザイン。 これは、すべてのデバイスに同じURLを用いて、各URLにアクセスするとすべてのデバイスに同じHTMLが送信され、CSSのみを用いて各デバイスでページをどのように表示するか決める方法です。 ユーザーエージェントによるデバイスごとの出し分け。 これは、すべてのデバイスに同じURLを用いますが、各URLにアクセスすると各デバイスごと
フィードバックを送信 コレクションでコンテンツを整理 必要に応じて、コンテンツの保存と分類を行います。 Google 検索の基本事項 Google 検索の基本事項は、ウェブベースのコンテンツ(ウェブページ、画像、動画など、Google がウェブ上で見つけた一般公開されているコンテンツ)について、Google 検索結果に表示されるための適格性を満たし、上位に表示されるようにするための重要な要素です。 技術要件: Google 検索でウェブページを表示させるためにウェブページに必要なもの。 スパムに関するポリシー: 掲載順位が下がったり、Google 検索の検索結果から完全に除外されたりする原因となる行動や手法。 主なベスト プラクティス: Google 検索の検索結果でのサイトの表示を改善するための主な方法。 Google 検索の検索結果にページが表示されても一切料金は発生しません。 ただし
Revision 2.1 This style guide contains many details that are initially hidden from view. They are marked by the triangle icon, which you see here on your left. Click it now. You should see “Hooray” appear below. Hooray! Now you know you can expand points to get more details. Alternatively, there’s a “toggle all” at the top of this document. This document defines formatting and style rules for HTML
インターネット上に様々なガイドラインが公開されていますが、その中でもUI、UX、ユーザビリティについて言及している日本語限定の情報を集めてみました。 有志で翻訳されたガイドラインもあります。感謝です! Apple 超が付くほど有名なガイドラインターネット上に様々なガイドラインが公開されていますが、その中でもUI、UX、ユーザビリティについて言及している日本語限定の情報を集めてみました。 有志で翻訳されたガイドラインもあります。感謝です! Apple 超が付くほど有名なガイドラインです。これを抑えておけば他は必要ないかも? アップル ヒューマンインタフェースガイドライン iOS ヒューマン インターフェイス ガイドライン(PDF) iPadヒューマンインターフェイスガイド ライン(PDF) Google AndroidアプリはiPhoneと同じUIで良いんんじゃない?と思っている方は、開発す
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く