ソシオメディアがまとめている、ヒューマンインターフェースをデザインする際の指針です。これらは、インターフェースデザインに関する様々な文献と、実際のデザインコンサルティングで得た知見をもとに、ソシオメディアが独自に編纂したものです。継続的に追加・更新していきます。 すべてモデルインタラクションプレゼンテーション

Excalidraw is a virtual collaborative whiteboard tool that lets you easily sketch diagrams that have a hand-drawn feel to them.

スマホ、スマートホーム、クラウドサービスなど、多くの分野で世界レベルで覇権を競っているのがシリコンバレーの巨大テクノロジー企業、GoogleとApple。 時価総額ランキングでも常に上位にランキングし、ビジネスモデルの側面ではかなり共通点がありそうなこの2社。しかし実はさまざまな側面でかなり異なる戦略を取っている。 GoogleとAppleにおけるデザイン、組織、カルチャー、マーケティングなど10の項目に対してのアプローチの違いを画像で表現してみた。 Google: ユーザーが欲しいと思っているものを作るApple: ユーザーが欲しいはずのものを作る「Appleはユーザーが欲しいとまだ気づいていないプロダクトを作ることが多い」 お客様第一主義とユーザー中心デザインの違い

World IA Day 2019 TokyoIA in IxD - OOUIとこれからのUI

CSS組版 Vivliostyle ユーザーと開発者の集い 2020秋 https://vivliostyle.connpass.com/event/189940/

Webサイトやアプリを作る際に設計図として欠かせないワイヤーフレーム。各画面で何を伝えたいかを一緒に開発するエンジニアやディレクターに伝えるコミュニケーションツールとして大事な役割を持っています。 一方で、ワイヤーフレーム作成の段階でグラフィック要素を多くしてしまったり、色やロゴ、複雑なフォントを多用するなど、ついデザインを作り込んでしまったことはないでしょうか。こうした問題は、特に初心者のデザイナーの方に陥りがちかと思います。 しかし、作り込んだからといって良いワイヤーフレームと言えるとは限りません。むしろWebサイトやアプリの方向性の合意を関係者内で早めにとり、そのあとで細かく作り込む方が、効率よくデザインを進めることが出来ます。 この記事では、素早くワイヤーフレームを作るためにrootでも使っているデザインツール「Whimsical」をご紹介します。 直感的な操作が可能なデザインコラ

You've got some explaining to do Download OmniGraffle for Mac Includes a free 14-day trial Powerful visual communication With the power to diagram, rapid-prototype, and design, OmniGraffle was made for professionals who need to organize or communicate visually—beautifully.

このたび、BtoBサイトの成功パターンをまとめた『BtoBサイト・チェックリスト』とワイヤーフレームを、株式会社ベイジ、株式会社才流、株式会社WACULの3社連名で発表しました。 チェックリスト（PPT版）ワイヤーフレーム（PPT版）ワイヤーフレーム（XD版）ここで取り扱っているBtoBサイトとは、BtoB企業のマーケティングあるいはセールスに貢献することを目的として作られたwebサイトのことです。そしてこの取り組みの根底にあるのは「BtoBサイトにおける車輪の再発明を減らしたい」という3社共通の思いです。 BtoB企業といっても多種多様な企業が存在するように、BtoBのマーケティングやセールスを含む購買プロセスも突き詰めれば、個別の商材特性、顧客特性、業界特性、組織特性、経営環境などの影響を受けた、多種多様なものになります。 しかしながら、個別最適化しか手がないわけでもなく、BtoBビジ

先日行われた HCD-Net 関西フォーラム 2020 での私の講演「オブジェクト指向UI入門」の内容を、ほぼそのままのスクリプトで連続ツイートしていこうと思います。 https://t.co/x9hZMw3cMW

個人的な観測範囲によると、定期的にTwitterで議論になる三大Web制作話題は ・ マサカリ ・ jQuery ・ ピクセルパーフェクト なのですが、今年もまたこのシーズンがやってきました！2020年9月20日に話題になったピクセルパーフェクトのツイートは以下にまとめられています。 そもそもピクセルパーフェクトとは何かをみてみたいと思います。 ピクセルパーフェクトとは簡単にいってしまうと、デザインカンプを1pxのズレもなく完璧に再現することです。まぁ、簡単か難しいかといえば、1枚の絵をそのまま再現すると開き直ると慣れればそんなに難しくありません。Bodyのbackground-imageにデザインカンプを設定してその上にパーツを配置していけばいいだけなので。ChromeにPerfectPixelというアドオンを入れるだけでも十分です。 では、どうしてピクセルパーフェクトはこれだけ議論にな

平尾誠@ARUTEGA.Inc @Makopontass コーディングを外に出すことが増えてきた。 やはり経験値が少ない人の品質管理は大変だと感じつつも、しぶとくピクセルパーフェクトを狙ってくる方に仕事を任せてよかった。 この再現性への執着心がないと伸び代を感じれない。 2020-09-20 00:34:07 吉本 集 / aru inc. @tsuDoi220 いやー、実際そうなんですよねー。 ピクセルパーフェクトに、そもそも拘っていない人に、仕事お願いしたくない。テクニックどうこうより、全然こっちのほうが大事。ほんとに。 後、速度とちゃんと納期守ること。 当たり前のようだけど、意外とね、、、 twitter.com/makopontass/st… 2020-09-20 00:45:27

glitch-image の使い方 一番シンプルに glitch-image を使う方法は <script> タグで呼び出す方法です。 <script src="https://unpkg.com/@uit/glitch-image@0.0.9/dist/glitch-image/glitch-image.js"></script> <div style="width: 200px; height: 200px;"> <glitch-image src="..."></glitch-image> </div> Web Component なので、これだけで好きな画像にグリッチエフェクトを適応することができます。 一方で、React や Vue.js などのコンポーネント内で適用したいケースも勿論あるはずです。そういった時は、 NPM パッケージ `@uit/glitch-image` をイ

昨今ではMicrosoftのMetro UIやAppleのiOS 7の発表により、フラットデザインがすっかりトレンドとなり、フラットデザインが様々なウェブサイトやアプリで採用されるようになりました。今でこそ両者とも名前を良く聞くようになりましたが、みなさんはその明確な違いについてご存知でしょうか。 なんとなくiOS 6のような立体的なデザインやリアルな質感のあるデザインをスキューモーフィズム、対照的にグラデーションのないものや立体感のないものをフラットデザインと認識している方が多いかと思います。そこで今回はこの両者について改めて、どのようなデザイン手法なのか、そのメリットとデメリットについて調べ直してみました。 フラットデザイン（Flat Design） アップル – iOS 7 最近の例ではiOS 7が有名ですが、もともとはSwiss Style(What is Swiss Style

【結論】font-family、おすすめの指定方法はこれ！ まずは結論から。わたしの設定しているfont-familyは、下記のとおりです。 全体にはこれ。 body { font-family: -apple-system, BlinkMacSystemFont, Roboto, "Segoe UI", "Helvetica Neue", HelveticaNeue, YuGothic, "Yu Gothic Medium", "Yu Gothic", Verdana, Meiryo, sans-serif; } Cocooｎを使っているかたは、これを追加 .ff-yu-gothic { font-family: YuGothic, "Yu Gothic Medium", "Yu Gothic", Meiryo, sans-serif; } そして太字の箇所には以下の指定。 b, str

2018年12月17日CSS,JavaScript,アクセシビリティGitHub の Issue ラベルなど、任意の色の中に文字を入れたい場合があります。このとき文字色が一色のみだと、背景色と似たような色のときに読みづらくなってしまいます。 以下のスクショでわかるように、GitHub は背景色によって文字色を黒か白のどちらにするかを計算しているようです。 個々のサービスの実装についてはわかりませんが、WCAG (Web Content Accessibility Guidelines) で定義されているコントラスト比を使うことで、背景色に対して読みやすい文字色を選択することができます。 WCAG で定義されているコントラスト比 (contrast ratio) #WCAG は Web のコンテンツを障害者がより利用しやすくするためにはどうするべきかが記された指標です。また一般的に、WCAG

Today we can use a variety fonts but there was a time when we didn't have web-fonts and only a few variations. Most usable were — Georgia, Arial and Times New Roman. But if you wanted to do something unusual and use your own fonts — that's what I would call pain in the ass. The `@font-face` rule was announced only with the CSS3 fonts module. The first formats for embedded fonts were Embedded OpenT