Designing for iPhone X - Learn iOS 11 Design - Design+Code
iOS 11 marks the introduction of the iPhone X, a much taller iPhone that has virtually no bezel. The 5.8-inch OLED screen is larger than the iPhone 8 Plus’s 5.5-inch, yet the body size is about the same as the iPhone 8. For designers, this means more freedom in our canvas. The content you are trying to access is only available for subscribing users of Design+Code.
効率的なアプリ開発のためにデザインガイドラインを作成した話 - ZOZO TECH BLOG
こんにちは。デザイナーの権です。 アプリ開発に関わるデザイナーの方々は、仕様とデザインが決まって実装に移る際、どのようにチームでやりとりしていますか？ それぞれの開発体制や状況に合わせて進めていくので、会社によって様々だと思います。弊社でも効率的な開発のために、デザインデータや仕様書、指示書、プロトタイプの準備等、日々試行錯誤しながら最適な方法を探しています。 数ある開発手段の中で今回は、弊社が運営するサービス「iQON」の機能改善やデザインリニューアルに効率的に対応できるよう新たに作成した、デザインガイドラインについてご紹介したいと思います。 デザインガイドライン作成の背景 弊社では1年ほど前からデザイナーが5人に増えたことにより、プラットフォームごとに一人づつオーナーシップをとって制作を進める体制に変更されました。 私も以前は、アプリデザインや広告のデザインなどジャンル関係なく携わって
Railsのプロジェクトリニューアルの機会にHTML/CSSのコーディング規約を作ってみた - Qiita
はじめに 今回、社内でフロントのまるまるリニューアル(RailsのViewは基本的に全て変更)があるので、CSS設計やディレクトリ構成などをどうするか色々まとめてやってます。 コンポーネント化を意識したり、どういうルールを適用したりするかをまとめていたら結構な量になったので共有しようと思った次第です。 BEMやSMACSS、FLOCSSなどを導入したけどそれだけじゃどうも綺麗にならない、だったりどこのファイルに何を書いていけばいいかいまいち分からない…といった方には参考になるかと思います。独自で作ったものであることと、リニューアルの初期段階でこれから問題がいくつか発生する(すでに発生していくつか改善しています)可能性があることを踏まえてご覧いただければと思います。不明点や気になる点はコメントで聞いていただければ幸いです。 以前、基本的なものは僕が普段使っているCSSのルールをコーディング規
LINE APP ICON GUIDELINE
LINEおよび関連サービスのロゴ、アイコンなどは、LINEヤフー株式会社の権利物です。 LINEおよび関連サービスのロゴ、アイコンなどを使用する場合は、本ガイドラインのルールに準じて使用してください。 テレビや雑誌、その他メディアで使用する場合や、ガイドラインの不明点やご質問は、こちらの窓口からお問い合わせください。 広告主の方が広告・販促・告知物においてロゴ、アイコンを使用される場合のガイドラインは、こちらに掲載している「広告・販促・告知物等におけるLINE関連素材のご利用に関して」をご確認ください。 ※ガイドラインの不明点やご質問は、こちらの窓口からお問い合わせください。 使用原則 全てのロゴデータは、データを変形 ・加工せず、そのまま使用することを原則とします。 アニメーションや効果（拡⼤、回転、装飾など）をつけることも禁止しております。 BRAND ICON LINEを表す際は、下
Twitterのブランドガイドライン | about.twitter.com
<path opacity="0" d="M0 0h24v24H0z" /> <path d="M17.207 11.293l-7.5-7.5c-.39-.39-1.023-.39-1.414 0s-.39 1.023 0 1.414L15.086 12l-6.793 6.793c-.39.39-.39 1.023 0 1.414.195.195.45.293.707.293s.512-.098.707-.293l7.5-7.5c.39-.39.39-1.023 0-1.414z" /> </svg>" data-icon-arrow-left="<svg width="28px" height="28px" viewbox="0 0 28 28" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://ww
Style Guide Boilerplate
WHY If you're like me, you find yourself using common design components from one website to the next. You could grab the lastest and greatest framework and use that to handle these common components, or you could roll your own framework. Style Guide Boilerplate is geared for people interested in creating their own "tiny Bootstraps". Style Guides: Promote consistency Promote modular thinking Add cl
メンテナブルCSS
概要 メンテナブルなCSSを目指し、定義された一般的なCSSルールの紹介と、それらのルールを適用するにあたって活用できるツールを報告します。 1. 序論 CSSは記述ルールが簡素であり、少しの学習コストですぐに記述ができる手軽なツールです。 しかし、大規模なアプリケーションで複数人で開発するケース等では、見栄えだけしか考えずに身勝手にコーディングしてしまうと、 非常にメンテナンスコストがかかる負の遺産が作られてしまいます。 そのためCSSの品質を保つために様々なプロジェクトで、CSSの定義ルールが決められています。 本稿では一般的なCSSの定義ルールと、そのルールがなぜ作られたのかを合せて報告致します。 また、CSSのルールを適用するにあたって、手動・目視でルールの適用をチェックするのは非常にコストが高い作業です。 これらルールの適用を補助するツール群を、合せて報告致します。
Google HTML/CSS Style Guide
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
Twitterヘルプ: Twitter登録商標の利用ガイドライン
Twitter登録商標の利用ガイドライン Twitter商標登録ロゴの使用ガイドライン TwitterとTwitter登録商標ガイドラインをご参照いただき、ありがとうございます。 われわれTwitter社はオープンプラットフォームの価値とTwitter独自のエコシステムの健全な成長を、非常に重視しています。その一環として、Twitterを信頼していただき、Twitterの登録商標を利用する人々や組織との関連についての混乱を避けることが大切だと考えます。本文書はTwitterの登録商標の使用時に、弁護士などを通じた交渉を必要とせず、安心してご利用いただくことを念頭にご案内しております。 本書に記載のない方法にてTwitterの登録商標の利用を検討される場合は、必ず下記メールアドレスまでお問合せください。 trademarks（アットマーク）twitter.com 【あなたのアカウントを紹介す
IBMがWebアプリケーションのUIガイドラインとHTML/CSSのソースコードを公開
業務アプリケーションがWebアプリケーションとして開発されるのは現在の大きなトレンドです。それに伴ってHTMLとCSSによって業務アプリケーションの複雑なユーザーインターフェイスを構築する必要性が生じます。 しかし機能が豊富な業務アプリケーションのユーザーインターフェイスをHTMLとCSSで構築するのはそれほど簡単ではなく、しかもそれをアプリケーション全体で統一し、優れたユーザビリティを実現するのはさらに手間のかかる作業です。 そうした業務用のWebアプリケーションのユーザーインターフェイスを構築するためのサンプルが豊富に含まれたガイドライン「IBM Lotus User Interface Developer Documentation」が、IBMから公開されました。 今回公開されたIBMのガイドラインは、同社のLotus製品群のユーザビリティを統一するための社内プロジェクト「One U
英国政府の公式 Twitter ガイドラインが非常に参考になる件
ということで、今日のシロクマ日報で紹介した「英国政府関係者向け Twitter ガイドライン」。なかなか参考になるので、内容を一部紹介してみたいと思います。 （※8月3日追記：作者の Neil Williams さんから了解をいただき、全文を日本語訳してみました。ご興味のある方は、こちらのリンクからご確認下さい。） ちなみにこちらが原文。Scribd のアカウントを持っていれば、PDF形式等でダウンロードも可能です： Template Twitter Strategy for Government Departments 【リスク】 まずは4章の「リスク」。文字通り政府系 Twitter が気をつけるべきリスクが解説されているのですが、対策が参考になります。いくつか抜粋してみると： 人手不足、または許可が下りないことが原因で、一般ユーザーからの「会話に参加しろ」「質問に反応しろ」という声に
表記規則：企業サイトで使用する「ひらく漢字」「ひらかない漢字」
今まで、多種多様な企業サイトの表記規則を策定させていただきました。その際、策定時のベースとして使用する「ひらく・ひらかない漢字」の一部を紹介します。 最終的な表記規則のガイドラインでは、下記の「読み・正・誤」の項目のほかに「用例・備考」が加わります。 例：トキ「期間が確定していない場合はひらがな、確定している場合は漢字を使用」 また、表記規則は「ひらく・ひらかない漢字」以外にも「一般名詞」「固有名詞」「独自用語」「英数記号」などの項目を設けて策定しています。 ひらくことが多い漢字 ひらくことを検討する漢字 表記規則の策定にあたり ひらくことが多い漢字 読み 正 誤
(x)html css ガイドライン beta
バージョン情報(ナンバー,日付,編集者,編集したドキュメント) ver0.4.1 2008/10/9 azuma Add Cardinal rule。 ver0.4 2008/8/11 azuma default.cssをreset.cssに名称変更。 ver0.4 2008/8/11 azuma Templateを廃止。DesignModuleに統一。 ver0.4 2008/8/11 azuma cssの設計を変更(common.cssとpages_layout.cssをskin.cssに統合) ver0.4 2008/8/11 azuma Add Microformats reference(Micorformatsの記述に合わせてid class名を大文字区切りから“-”区切りに変更) ver0.3 2008/5/2 azuma Add XSLT reference ver0.2.
Webライティングについてお伺いします。 Webサイトを制作する際に、時間・費用などの面からコンテンツの文章作成をクライアントに依頼することがあるかと思いま…
Webライティングについてお伺いします。 Webサイトを制作する際に、時間・費用などの面からコンテンツの文章作成をクライアントに依頼することがあるかと思います。ただ、何の条件もなく「文章を作ってください」とだけお願いしてしまうと、ものすごく長文だったり、半角や全角が統一されていなかったり、表記が揺らいでいたり、何を言いたいのか分からない文章であったり、いろいろなことがあろうかと思います。 こういった事態を防ぐためにどのような対策を取っていますか？実際に皆さんが採用している方法や小技、参考になりそうな書籍やサイトなどを教えていただきたいと思います。よろしくお願いします。 ちなみに僕は、ケースバイケースですが「使用ソフトウェアを決める（Wordやメモ帳など）」「ライティングのガイドラインのようなものを渡す」ということをクライアントにあらかじめお願いしています。
ダウンロードもできる、大手ウェブサイトのガイドライン | コリス
ガイドラインの中にはテレビやエディトリアル関連もありますが、ウェブ制作関係のものをいくつか紹介します。 一部のページ（,htaccessの設定など）はアクセス制限をされているため閲覧することはできません。 ウェブサイト ガイドライン Guidelines Overview ガイドラインのトップ Standards & Guidelines Glossary ガイドラインの用語集 デザイン関連 Visual Language ヴィジュアルスタイルガイド Multimedia Plug-in Content Standards (Flash, Shockwave etc.) Flashなどマルチメディアコンテンツ Brand Guidelines ブランディング マークアップ関連 Semantic Mark-up Markup XHTML Integrity Standards XHTML H
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Google Design
GitHub - kiwanami/CSS-Guidelines: High-level guidelines from writing manageable, maintainable CSS
Gimme Bar | Front end styleguides and pattern libraries
まだ仮想通貨持ってないの？
IBM Global Innovation Outlook 2.0