CSSとコンポーネント設計に対する考察 - uhyo/blog
近年のフロントエンド開発にはコンポーネントという概念が付いて回ります。React・Vue・AngularといったViewライブラリでは、コンポーネントを定義してそれを組み合わせてアプリを作ります。また、いわゆるWeb Componentsとして知られる仕様群により、ライブラリに依存せずに“コンポーネント”を作ることもできるようになってきています。 コンポーネントは、何らかの機能（あるいは責務）を持った部品です。また、コンポーネントによっては再利用される（アプリ内の複数の箇所から利用される）ことを意図しているものや、そもそもライブラリとして配布されているようなものもあります。アプリの機能の一部分を抜き出したものという見方をすれば、コンポーネントというのは関数にとても類似した概念であることが分かります。 コンポーネント設計によって、言い換えればアプリがどのような機能を持ったコンポーネントたちに
UI Tiles·Webサイト全体の画面遷移設計に使えるデザイン集 MOONGIFT
Webサイトを開発する際に使われるのが画面遷移を表現するフローチャートです。例えばコマースであればトップページから商品一覧、カテゴリ一覧や商品のピックアップなどの遷移が考えられます。 深くなってしまう場所がないか確認したり、ユーザ動線が正しく描けているかどうか確認するのに便利です。UI Tilesはそんなフローチャートを作成するのに便利なデザイン集です。 UI Tilesの使い方 UI TilesはPNGの他、PhotoshopやIllustrator形式でファイルが配布されています。 PNG版。画面のモックがたくさんあります。 それぞれ小さいながらも特徴があります。 動画プレーヤ、ポートフォリオページもあります。 PSDはデモも用意されています。 デザイン一覧。 Illustratorも同様です。 UI Tilesを使うと、これまでは単なる四角い枠に対してトップページなどとラベルを貼って
ロイヤリティフリーで300種類のUIの動きに合わせて使える効果音源キット「SoundKit」
スマートフォンやタブレットのアプリのUIデザインの動きに合わせた、通知音・スライド音・楽器サウンドなどの300種類の効果音を集めたキット「SoundKit」が登場しました。ロイヤリティフリーで使用可能で、CDレベルの高音質WAVファイルによるプロフェッショナル音源キットとなっています。 UI Sounds • Sound Effects • SoundKit https://soundkit.io/ SoundKitはUIプロジェクトのために作られたプロ品質の音源集。スマートフォンやタブレットなどのデバイスや、デスクトップアプリケーションの効果音としてロイヤリティフリーで使用でき、ハイエンドスピーカーによる出力にも対応しているとのこと。 どんな効果音があるのかというと、警告音や通知音などの「アラート音」、ギター・ピアノ・チャイム・などの楽器で奏でる「楽器音」、クリック音やビープ音などを集め
綺麗でレスポンシブなタイムラインのUIを作成できるjQueryプラグイン「Dynamic Timeline」:phpspot開発日誌
Dynamic Timeline 綺麗でレスポンシブなタイムラインのUIを作成できるjQueryプラグイン「Dynamic Timeline」。 次のようなデザインで、たて型、ヨコ型のデザインのタイムラインのUIを生成できます。 関連エントリ 画面にリアルな雪を降らせられるjQueryプラグイン「Snowfall」 複数RSSをjQueryでアグリゲートして1ページに表示できるjQueryプラグイン「jQuery Feeds」 画面から外れた際に要素をfixed固定できる「jquery-scrollfix」 座席番号の予約機能などに使えそうなjQueryプラグイン「jQuery-Seat-Charts」
JavaScript フレームワーク - ペパボテックブログ
フロントエンド周りの技術は驚異的なスピードで進化し、また多様化しています。それらを全てマスターするのは途方もなく大変なので、ペパボでは、社内のエンジニア・デザイナが「最低限これだけはおさえておこう」というスタンダードを文書化することにいたしました。社内向けを想定した文書ではありますが、社内のみに留めず多くの方に役立てたいと考えたため公開します。 この項目の担当 @hadashiA どうしてフレームワークを使う？ (1) ドメインロジックとプレゼンテーションの分離 (2) SPA（シングルページアプリケーション） 流行り廃り (1) MVC (2) MVVM (3) Virtual DOM どれを使う？ どうしてフレームワークを使う？ (1) ドメインロジックとプレゼンテーションの分離 まずこちらの画面を見てください。 ©任天堂 スーパーマリオワールド スーパーマリオが右にダッシュすると、マ
最近のWebデザインで採用されているレイアウト72種類を収録した無料のUI素材（PSD, AI, Sketch） -UI Tiles
最近のWebデザインでよく利用される1カラム、2カラム、3カラム、カード型、ボード型の基本的なグリッドをはじめ、ランディングページ、プロダクトページ、ギャラリー、ポートフォリオ、カート、FAQ、コンタクト、マップなど、さまざまなレイアウトが用意されたワイヤーフレームやフローチャートを作成するための素材を紹介します。 UI Titles UI TILES: WEBSITE FLOWCHARTS ダウンロードできる素材のフォーマットは、4種類。 .psd（72種類のレイアウトとチャート） .ai（72種類のレイアウトとチャート） .sketch（72種類のレイアウトとチャート） .png（72種類の各レイアウト） 各フォーマットにはそれぞれ72種類のレイアウトとチャートが揃っており、ワイヤフレームやフローチャートやサイトマップとして利用できます。
画面遷移に疑問を感じたあなたにオススメするUI Flowsというツール | UXデザイン会社Standardのブログ
2014.11.19 / UI 画面遷移に疑問を感じたあなたにオススメするUI Flowsというツール Tomohiro Suzuki クライアントやディレクターから渡された画面遷移図を元にワイヤーフレームを作ってみると、後から足りない画面が次々に発見された、または画面内の情報がどこに繋がるのか分からないといった経験はありませんか？ この画面遷移図というものは本来は制作範囲の全体像と構造を明確にし、必要な画面というものを洗い出したりするものです。通常のWebサイトであれば、従来のような画面遷移図でも問題ないかもしれませんが、多くのインタラクションが発生するサービスの設計では複雑化しやすく、何度も情報を行き来して確認することになるため時間がかかります。 原因のひとつとして、画面遷移図では画面名のみを記載して繋げていくことになるため、必要な情報が不足していることが挙げられます。その結果、本来で
UIの話は会議室でするな
9. ● 常に文書による指示を要求せよ。 ● 準備を十分行い完全に準備ができているまで実行に移すな。 ● 些細なことにも高い完成度を要求せよ。わずかな間違いも繰り返し修正させ小さな 間違いも見つけ出せ。 ● 重要な決定を行う際には会議を開け。 ● もっともらしくペーパーワークを増大させよ。 ● すべての規則を隅々まで厳格に適用せよ。 ● 何事をするにも「通常のルート」を通して行うように主張せよ。決断を早めるため のショートカットを認めるな。 ● 可能な限りの事象を委員会に持ち込み「さらなる調査と熟考」を求めよ。委員会の メンバーはできるだけ多く（少なくとも5人以上）すること。 ● 議事録や連絡用文書、決議書などにおいて細かい言葉遣いについて議論せよ。 ● 以前の会議で決まったことを再び持ち出し、その妥当性について改めて問い直せ。 10. ● 常に文書による指示を要求せよ。 ● 準備を十分行
UIデザインの腕が上がるPhotoshopのチュートリアルのまとめ
UIデザイン用の最適なPhotoshopの環境設定方法から、ブラーやサークルを使ったエレメント、フラットや縦長やレトロスタイルのレイアウト、ページのアクセントになるエレメントの作り方、ディテールの作り込み方など、ユーザインターフェイスをPhotoshopで作成する際に勉強になるチュートリアルを紹介します。
知らないと怖い！Webディレクターが制作サイトのSEOで“大失敗”しないためのポイント | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは、ヴォラーレという会社でSEOコンサルタントをやっているじつかわです。 SEOコンサルをする中でさまざまなWebディレクターさんと一緒に仕事をさせていただいてきたのですが、やはりみなさん、SEOの領域まで手を出したくても出せない、というのが実情のようです。SEOをきちんとおさえたサイト構築をできる方には数えるほどしか出会ったことがありません。 しかし、外部リンクによるSEOで成功するのが難しくなっているなか、SEOを成功させるためには内部SEOをどこまでできるか、サイト構築時にいかにSEOを組み込んでいけるか、というのが非常に重要になってきます（※）。 SEOは他の広告手段とは違って、サイトそのものを検索エンジンに評価してもらうという取り組みですから、どのような企画・設計でサイトを構築するか / その際にちゃんとSEOを押さえられているか、によって大きな差がつきます。すなわち、S
アプリデザインの参考になるUI/UXデザインギャラリーサイト10選 - 株式会社モンスターラボ
オンボーディングのUXデザインの参考になる海外Webサイト 「オンボーディング」とは、初めてサービスや製品を使うユーザーがヘルプや説明書を読まなくても使っていくうちに操作方法がわかるように設計する手法のことです。 いかに素晴らしいプロダクトであっても、初めて使用するユーザーにストレスを与えてしまい、すぐにアンインストールされてしまっては意味がありません。 オンボーディングのUXデザインで参考にしたいのが、以下の2つのWebサイトです。 アプリデザインまとめ① User Onboarding 「User Onboarding」は海外のアプリや有名Webサービスのオンボーディングについて紹介しているWebサイト。 オンボーディングを画面単位で切り分けて、参考になる点と改善が必要な点をピックアップしています。 サンプルはスライド形式で表示されます。簡単な英語で解説されているので、英語が苦手な人で
Fluentd UIが出たので触ってみた - すずけんメモ
fluent/fluentd-ui https://github.com/fluent/fluentd-ui Fluentd用のWeb UIが出たようです。試しに触ってみます。 インストール READMEのとおりですが、 $ gem install fluentd-ui $ fluentd-ui start Open http://localhost:9292/ by your browser default account is username="admin" and password="changeme" もしくは、 $ git clone https://github.com/treasure-data/fluentd-ui $ cd fluentd-ui $ bundle install $ bundle exec rails s です。 僕はbundlerでいれることにしました
アプリUI/UXデザイナー必見！「ハンバーガーボタン」ナビゲーションを使うとユーザーエンゲージメントが半減することが発覚 | ゴリミー
あなたが作っているナビゲーションボタンは今流行りの「ハンバーガーボタン」、またの名を「ナビゲーションドロワー」を採用しているだろうか。それとも一覧で表示している「タブボタン」を採用しているだろうか。 クリーンでシンプル、メインコンテンツの表示領域が最も広く確保できるなどいいこと尽くしの「ハンバーガーボタン」ナビゲーション。一方で、常にボタンが表示されメインコンテンツの表示領域が必然的に狭くなってしまう「タブボタン」ナビゲーション。見た目のデザインとしては当然「ハンバーガーボタン」の方が良い。では実際にユーザーとしても同様の見解なのだろうか。 クリーンでシンプルだが、ユーザーは操作方法を覚えられない 「ハンバーガーボタン」もしくは「ナビゲーションドロワー」と呼ばれるナビゲーションUIは数多くのアプリに見られる。Googleもアプリデベロッパー向けにオススメのデザインパターンとして推奨している
DISられないUIを作るために最低限守るべき5つの鉄則 - たごもりすメモ
ぼくらが迂闊にUIを作ると、そこにはユーザの正直な目線があり、非常に様々な、そして真っ当な反応がある。 曰く「わからん」「まさかそこをクリックするとは」「不思議な動作」「独自宇宙」「モリスUI」。 反応がもらえるのは非常に良いことだが、何度も何度も繰り返しているとつらくなってくるので、できれば避けたい。分かっている(いた)ことは最初から対応しておきたいものだ。*1 ということで、ここではブラウザで操作する管理画面等のWebUIを作るとき、真っ先に心得ておくべき5つの鉄則を紹介したい。これを守っていてもDISられなくなるというわけではないが、これを守らないと間違いなくDISられるので注意しよう。 なおこの記事ではオリジナリティというものについては考慮しない。オリジナリティとか犬に食わせろ。 クリックできる場所はcursor:pointerを指定しろ これを忘れるとこの世のものとは思えないくら
UIの学習のために生まれたUI | UXデザイン会社Standardのブログ
UIには本来のサービスが成り立つ上で必要な機能に基づいた必須UIの他に、その必要機能についてユーザーに学んでもらうための学習用UIというものが存在します。本来であればサービスに必要なのは必須UIのみだったはずですが、リリース後やリリース前の段階においてユーザビリティテストを行なった結果があまり良くないのであれば改善をすることになります。しかし、UIのどこに課題があるのかの分析と改善には時間がかかり、実装などでも工数が発生することも考えると、より少ない手間で解決する方法が望まれます。今回は、このようなユーザビリティ上の課題を解決するために生まれた学習用UIのパターンをご紹介します。 参考：モバイルデザインパターン 第2版 ―ユーザーインタフェースのためのパターン集 使い方を学習するためのUIパターン もし新規のユーザーがサービスのコア機能の使い方がわからなければ、サービス自体を利用してくれな
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
エンジニアのためのUIデザイン
ウェブデザインのセンスを磨こう！ 2014年洗練されたディテールのUIデザインのまとめ
新着記事
Bootstrap 3をベースにしたフラットなかわいいデザインのHTMLとPSDが揃ってる無料のUI素材 -Druken Parrot UI Kit
ブックマークしておきたい、スマホUIをコレクションしている海外と日本のサイトのまとめ
