ソシオメディアがまとめている、ヒューマンインターフェースをデザインする際の指針です。これらは、インターフェースデザインに関する様々な文献と、実際のデザインコンサルティングで得た知見をもとに、ソシオメディアが独自に編纂したものです。継続的に追加・更新していきます。 すべてモデルインタラクションプレゼンテーション
ソシオメディア | ヒューマンインターフェース ガイドライン
ソシオメディアがまとめている、ヒューマンインターフェースをデザインする際の指針です。これらは、インターフェースデザインに関する様々な文献と、実際のデザインコンサルティングで得た知見をもとに、ソシオメディアが独自に編纂したものです。継続的に追加・更新していきます。 すべてモデルインタラクションプレゼンテーション
メルカリ社内Slack利用ガイドラインを一挙公開しました〜！！#メルカリな日々 | mercan (メルカン)
こんにちは！メルカン編集部のnatukifmです。 2020年6月23日、メルカリでは、全社的なコミュニケーションツールとして導入しているSlackの社内利用ガイドラインをGitHubにて公開しました〜！ Slack上での情報共有や連絡を円滑にするため、2016年につくられた本ガイドライン。細かな改定を重ねられてきたものの、2016年当時からほぼ変わっていなかったりします。 そこで本日の#メルカリな日々では、社外公開したばかりのメルカリ社内Slack利用ガイドラインをちらっとご紹介します！ Slackを使ううえでの前提 1：オープンであることを意識する ・ プライベートメッセージやプライベートチャンネルの利用は禁止しないが、人事・インサイダー情報以外は、コミュニケーションコストの低減と、風通しが良くオープンである社風を維持するために基本的にオープンにする ・ チャンネルへのinvite/l
フロントエンドエンジニアから、デザイナーさんに意識してほしい10のこと｜Pittan｜note
フロントエンドエンジニアとデザイナーさんは日々協力してプロダクトを作っていく関係にあります。デザイナーさんが作ってくれたものをエンジニアが素早く実現できるよう、いくつかエンジニアから意識してほしいことをまとめました。 なんでこんな話になったのか（前置きなので次の章まで飛ばしてOKです） デザイナーさんから「この画面をこんな風に作ってください」とXDやSketch、PSDなどいろいろな形で渡されることがあると思います。 僕の個人的な意見・経験ですが、いざ実装するぞとなったときに 「あれ…ここってどうしたらいいんだろう？」 と迷って作業のスピードが落ちてしまうことがとてもストレスに感じていました。できればノンストップでいきたいなあと思うわけです。 手が止まるたび、デザイナーさんに「ここってどうしたらいいですか？」と質問するのが何か新しい画面を作るときに必ず発生していました。 「（いつも聞いてる
PhotoshopからXD、さらにSketchへ…Atomic Designを実現させるまでにぶち当たったデザインチームの苦悩 | スペースマーケットブログ
PhotoshopからXD、さらにSketchへ…Atomic Designを実現させるまでにぶち当たったデザインチームの苦悩 デザイナーの横井です。こんにちは！ 猫飼いなのですが猫に顔をうずめるのが難しい季節になってまいりました（毛まみれ） 久しぶりのデザイン記事となりましたが、今日は弊社デザインチームが行ったAtomic Designのシステム化の紹介と失敗体験、そしてその道のりを、赤裸々にご紹介しちゃいたいと思います。 既に完成したデザインのコンポーネント化に悩んでいる方々の参考に、少しでもなれば幸いです。 初期のスペースマーケットデザイン ゴリゴリのPhotoshopデザインだった時代 弊社のメインサービスである、スペースマーケットのデザインは約3年前にリニューアルリリースされました。 当時は全てPhotoshopでデザインされ、１ページにつき１ファイル、スマートフォンもPCも別フ
note ――つくる、つながる、とどける。
1203本 思想を持ったお店をつくったり、運営、デザインをしているひとやその感想などの記事をまとめるマガジンです。
効率的なデザイン運用のために、Sketchガイドラインを作ってみた話 - CrowdWorks Designer Blog | クラウドワークス デザイナーブログ
こんにちは。今年の1月からクラウドワークスに参画しました、UIデザイナーの井上です。 designer.crowdworks.co.jp 先日公開された、この記事を目にした方も多いのではないでしょうか。 そうです、私がTwitter転職の人です。 時間が経つのは早いもので、入社してから一ヶ月が経とうとしています。 さて、いきなりですがクラウドワークスに入ってまもない私が、効率的なデザイン運用をしていくためにSketchガイドラインを作ってみました。 その名も「baabaa Sketch Guidelines v.1.0.0(バーバースケッチガイドライン)」です！ ※「baabaa」とは「メーメー 」っていう羊の鳴き声のことです！ だんだんと膨張して行く無駄なデザインやシンボルを羊の毛に例えていて、その毛を削ぎ落とし必要な要素だけを蓄えたデザインデータにしていこうという施策になります。 今回
調査コンテンツで集客UP！ なら「インターネット調査品質ガイドライン」は当然知ってるよね | 初代編集長ブログ―安田英久
オウンドメディアで集客UPに効くコンテンツの定番に、「調査データ記事」があります。さまざまなリサーチデータをコンテンツ化することで、共感や洞察感を引き起こし、自分の意見を添えてソーシャルシェアを高められるため、よく活用されています。 また、そうしたデータをインフォグラフィック化することで、ビジュアル面のインパクトを強める手法も使われています。 でも、そうしたコンテンツを作るために行う「インターネット調査」について、ちゃんと考えたことありますか？ 今や主流となったインターネット調査を、これからも適切に行い、リサーチによって本当の生活者の姿や声を把握できるようにするために守るべき大切なことを、JMRA（日本マーケティング・リサーチ協会）さんが「インターネット調査品質ガイドライン」としてまとめています。 これは、調査を発注する企業の担当者さんも、ぜひ把握しておいてほしいものです。 「インターネッ
50 Manuais de Identidade Visual Para Se Inspirar - Design com Café
Fundador e colunista do Blog, atuo como Namer e Designer, que há 22 anos apoia e empodera empreendedores a ressignificarem suas marcas, tendo trabalhado em importantes projetos nacionais e internacionais, alcançando outros quatro continentes. Além disso, já empreendi como co-founder de aceleradora de startups, de estúdio de desenvolvimento web, plataforma de educação online e marca de HPPC Manual
ウェブサイトの作成や運用をはじめる前に知っておきたいこと | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは、Web 事業部マネージャーのさささんです。 みなさんググってますか？ 今回は、Web 制作に携わっている人、これから携わろうとしている人向けの記事です。 一番よく使われている検索エンジンを提供しているグーグルのことをもっと知ろう的な記事です。 Google (グーグル) と検索エンジン インターネットを利用している人には説明するまでもないですね。検索エンジンで有名な企業です。この Google のほかに、代表的な検索エンジンは Yahoo や Bing（ Windows で有名なマイクロソフトが提供）があります。 私たちは、検索エンジンがあることで、欲しい情報をカンタンに見つけることができます。 Web に携わる人たちは、世界中の人たちが検索エンジンを利用している限り、検索エンジンのことを興味レベルでも良いので知る必要があると思っています。 高品質のウェブサイトを作成するために
2017年、デザインガイドラインについて考える。｜Yuya Furusato｜note
株式会社rootのUIデザイナー 古里祐哉です（@remmyfurusato）。 rootでは、サービスの立ち上げやリニューアルに伴う、UI/UXデザインをご支援しています。 さて、今年を振り返えると「デザインガイドラインに注力した」年でした。デザインガイドラインを必要とされるクライアント様には共通点があります。 ・レイアウトパターンやパーツの使い方が定義されていないで、設計者やエンジニアが迷う。 ・結果、サービス全体の一貫性がなく使いづらい。 このような課題を抱えるクライアント様からのご依頼を多くいただきました。サービス開発の現場で、徐々にデザインガイドラインの重要性が広まってきているのではないでしょうか。 デザインガイドライン作成を通して考えたことをまとめたいと思います。 デザインガイドラインとは？ デザインガイドラインの定義は「サービスやプラットフォームのデザイン方針を示したドキュメ
エンジニアが知っておくべきデザインの基本。「デザインガイドライン」と「コンポーネント」を学ぶ！ - エンジニアHub｜Webエンジニアのキャリアを考える！
エンジニアが知っておくべきデザインの基本。「デザインガイドライン」と「コンポーネント」を学ぶ！ Appleをはじめとする多くの成功企業がデザイナを役員に据えるなど、デザインに対する重要度が年々上がっているこの時代、若手のうちにUIデザインに関する基本的な考えを身につけ、より良いプロダクトを制作できるエンジニアを目指しましょう。 こんにちは。 グロースデザイナ/フロントエンジニアとしてWebサービス開発に携わっている右寺（@migi）と申します。最近は複数の企業で、数値解析から企画提案、開発も含めてサービスを成長させるためのお手伝いをしています。 現在はフリーランスとして活動していますが、直近では株式会社グッドパッチというUI（ユーザインターフェイス）デザインに特化した会社に勤めており、そこではデザインとの距離がとても近いところで開発をしていました。 そんな私の経験から、この記事では「エンジ
スタイルガイドとパターンライブラリの違い
最近、パターンライブラリの作成ツールを探していて「Fractal」というツールを試しています。で、ふと「スタイルガイドとパターンライブラリの違いってなんだっけ？」という疑問が湧いたので、ちょっと整理してみました。ちなみに、どっちがいいかを書いているわけではないです。 特にウェブ向けのものではスタイルガイドもパターンライブラリもほぼ同じ意味で使われていることが多い気がしますが、あえてスタイルガイドとパターンライブラリを違ったものとして定義するとどうなるか、まとめてみます。 スタイルガイド 企業や組織のブランドイメージを統一するためにまとめられたガイドライン ロゴの使い方、配色パターン、タイポグラフィなどのビジュアルデザインを定義する より総括的なものだと文章のトーン&マナーなどのコミュニケーションデザインを定義する場合もある UIパターンやコンポーネントのデザイン一覧（パターンライブラリ）を
ウェブ制作に関わる人に役立つウェブアクセシビリティの基本 - ICS MEDIA
アクセシビリティという言葉を聞いたことはありますか？ 高齢者や障害者などハンディキャップを持つ人だけでなく、健常者を含めただれもがどんな環境からでもサービスを利用しやすいか、その利用のしやすさのことをアクセシビリティといいます。とくに、ウェブに関するものはウェブアクセシビリティといいます。 ウェブ制作者のなかには、アクセシブルなリッチインターネットアプリケーションのための仕様である「WAI-ARIA」を実装に取り入れてる人もいるかもしれません。今回はウェブ制作に関わる人に役立つウェブアクセシビリティの基本を紹介します。 ウェブアクセシビリティのガイドライン「WCAG」 世界中のウェブアクセシビリティの基本となるガイドラインとして、W3Cの「Web Content Accessibitility Guidelines」(通称：WCAG)があります。現在は2008年に勧告された「WCAG 2.
流行りのGoogleマテリアルデザインがすごい件 - LITERALLY
今更だけど「マテリアルデザイン」がスゴイ。デザイナーだけでなくノンデザイナーもその考え方を知っておく価値があると思う。 マテリアルデザインは2014年〜Googleが提唱している考え方だ。主にアプリやWebサイトに採用される。Googleのサービスにはだいたいマテリアルデザインが採用されている。はじめの一步としては「マテリアルデザイン＝Googleっぽいデザイン」と考えるとイメージが湧きやすいのではないかと思う。 Google+、Google Map、Gmailなんかは典型的なマテリアルデザインと言える。 マテリアルデザインの何がスゴイのか 「マテリアルデザインとは何か」と合わせてそのスゴさについて解説していく。 1. 厳密なガイドライン よく比較される「フラットデザイン」とはここが決定的に異なる。フラットデザインは誰かが「こうやって作るもんだぞ」と提唱したわけではない。明確なガイドライン
仕様変更に強く再利用しやすい！AbemaTVでも採用されている「Atomic Design」の基本を徹底解説
Web設計とソフトウェア開発は、これまで真逆の考え方をしていました。 通常Webサイトにおける設計では、ページ単位でデザインカンプを作成しますが、ソフトウェア開発では、コンポーネント単位で設計することが多くあります。 ところが、最近ではAbemaTVをはじめとして、コンポーネント単位でデザインを行うWebサービスも増えてきました。 その中でも、今注目されているのが、「Atomic Design(アトミック・デザイン)」と呼ばれるデザインシステムです。 Atomic Designはデザイン仕様の変更に強く再利用性が高いと言われており、Webサービスの開発に向いていると言われています。 今回は、コンポーネントベースでWebデザインを行うことができるAtomic Designの考え方の基本をご紹介します。 コンポーネント単位のデザインとは果たしてどういうもので、メリットはどこにあるのでしょうか。
株式会社ワクグミ-対話を通じて、ゴールを描き、実現まで伴走するゴールデザイン会社
対話を通じてビジョンやゴール言語化し、達成するための戦略構築・計画策定・実行まで伴走支援を行うゴールデザイン会社です
【企業サイト構築用】WordPress設計ガイドライン - Qiita
備忘録を兼ねて、企業サイト構築時に決めている設計方針・インストールしているプラグイン・セキュリティ対策をそれぞれまとめました。セキュリティ対策の項目を除き、構築時の細かい設定やプログラム実装についての説明は省略しています。 （※）2018.01.13: セキュリティ対策について加筆・修正を行いました 概要 実装する際の方針として、WordPressと紐付ける必要のないファイルは、できるだけWordPressのファイル・フォルダと分けて構築する手法を採択しています。これはサイト全体をWordPress依存にさせたくない、ということが大きな理由です。 また、関係ないファイルをWordPress内で管理させることによって、お客様やHTMLに詳しくない編集者が不用意にファイルを更新してしまうことを防ぐ意味もあります。8年以上WordPressと付き合ってきましたが、以下の設計方針が最も最適だと考え
マテリアルデザインで知らなかったところ (スタイルまで) - Qiita
マテリアルデザインを用いてアプリなどを作っているときにちゃんと理解していないとアドバイス出したりできないので、ちゃんと読んでみたいと思っていました。 多分ちょっと読んだことがあれば知っていることだと思うのですが、自分は恥ずかしながらまともに読んだことがなかったので全部読んでいます。 本当は実装の話をしたいのですが、とりあえずガイドラインを知らないと何も始まらないと思うので、、 今回は実装にはフォーカスせずに話します。 何か誤りなどありましたらご指摘、または編集リクエストお願いします。 日本語版も公開されたので、とても読みやすくなりました。 https://material.google.com/jp/ おすすめ度を★をつけて紹介します。 マテリアル基礎編 https://material.google.com/jp/ でマテリアル デザイン (Material Design)をダウンロード
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
マテリアルデザインでやってはいけない68のこと（間違いチェックリスト）
SEO専門家が語る「GoogleがなぜWELQをBANしないのか」によって見えるその狡猾さ
