とあるweb屋の仕事術

10年以上現役のweb製作屋さん。web製作雑務全部やる。

UI/UX

webサイトでは珍しいUIや奇をてらったデザインはNG。アフォーダンスをうまく取り入れよう

わかりやすいwebサイト、使いやすいwebサイトとは何かを考えさせてくれる 良ツイートを発見。 Webサイトで「珍しいデザイン」を用いるのはNGだ例えば下記のECは「+」「-」で数量を変更できるが、見慣れないため、何のボタンか分からない(数量との関連性が…

メルカリPCサイトに学ぶ。複数行のテキストを省略して末尾...の3点リーダーに代わるホワイトアウト省略方法

一覧表示のUIでよくある、 テキスト省略のTipsです。 CSSでは、指定した領域をはみ出したときに、 テキストを三点リーダー「...」で省略する プロパティがありますよね。 developer.mozilla.org ただこちら、1行のテキストにしか対応できません。 複数行でい…

最近よく見かけるCookieの使用を宣言したり使用にクッキーの使用に同意するUIはGDPR対策の一環

海外のサイトでよく見られる Cookie使用に同意するUIや クッキーの使用を宣言して ユーザに案内を促すUI。 ここ最近では少しづつ、 日本のWebサイトでも 見かけるようになってきました。 CNET Japan CNET Japan のサイトではフッターでCookieの使用宣言と同…

デザインのインスピレーションに。WebサイトやUIのデザイン・レイアウトに悩んだら参考にしたい記事と書籍

UIやレイアウトに悩んだときの アイデア出し、インスピレーションに いい記事と書籍を紹介します。 Webサイトであれば、 競合サイトや類似サイトを 見たりWebデザインギャラリーサイトを 見るのが具体的で参考になりますが、 ワイヤーレベルで配置のアイデア…

記事タイトルとURLコピーするボタンをSNSシェアボタンと同列に並べるUIがスマートで洗練されている

記事タイトルとURLコピーする機能は 便利だ、いいよねという記事を 以前書きました。 www.toaru.jp 上記で紹介した内容は、 記事本文の上か下に 「この記事タイトルとURLコピーする」 というボタンが配置してあるサイトを 例にしました。 今回はそれの少し進…

「noteカイゼン報告」はサービスの改善、アイデアが詰まっているので勉強になる

ここ最近Web系の情報収集を していく中で、note に書かれた 記事を目にしない日はないので、 note の勢いがすごいなと思っています。 web業界で note を知らないひとは ほぼいないとおもいます。 note.mu note はサービスの改善がすごい note の何がすごいか…

デザイン/UI設計・情報整理の基本。デザインを構成する要素を差別化して視覚的階層を意識して作ろう

デザインは整形して見た目をきれいにすることではなく、本質は問題解決、情報設計、情報整理です。 今回は「情報整理」にフォーカスをあてた記事を紹介します。 Webサイトの実装にあたってのデザイン作業を細分化すると「UI設計」というフェーズがあります。…

『記事タイトルとURLコピーする』機能いいよね

ブログやメディアサイト でたまにみかける機能ですが、 『記事タイトルとURLコピーする』ってやつ。 いいですよね。 はじめてみたとき、 あーこれいいなって思ったんですよね。 誰かに共有したいときが楽で。 共有する場面といえば、 SNSに投稿するか、 Web…

会員登録フォームの性別欄は男性・女性だけはもう古い。多様性を尊重する形式を考慮しよう

会員登録フォームでは だいたいある項目。 性別の選択。 よく見るのは下記の2種類です。 ○男性 ○女性 ですが、昨今ジェンダーへの関心が 高まっていることもあって、上記の 2種以外の選択肢や入力を促すサイト も増えてきました。 about.mercari.com 「メル…

装飾とあしらいがうまい!記事の見出しタイトルとアイキャッチ画像のデザイン・処理が秀逸なサイト

記事タイトル、見出しの 装飾、あしらいがうまいサイトを 発見したのでメモ&ご紹介。 tokyofreelance.jp スマホサイトより PCサイトのデザインがいいですね。 スクショ貼ります。 記事タイトル、アイキャッチの処理が秀逸です アイキャッチを背景にひいて、…

スクロールでついてくるスティッキーヘッダー(追従ヘッダー)の使い方がグッド!固定ヘッダに見出し/記事タイトルを入れているサイト

スクロールすると 画面上部についてくる スティッキーヘッダー。 ナビゲーションを追従させる使い方が 多い印象のUIです。 もうだいぶ世の中に浸透しているUIで、 市民権を獲得したと思います。 今回はスティッキーヘッダーの 使い方がうまいなというか、 こ…

WebサイトのナビゲーションにHOME(トップページ)への導線は必要か

先日こんなツイートが話題になっていました。 大抵のWebサイトでロゴを押せばトップ画面に戻れるからメニュー画面の「HOME」は冗長だしはずしたい派な自分なのに、さっき初めて訪れたWebサイトでメニュー開いて「トップページどうやって戻るんや?...ロゴか…

クオリティの高いWebサイトは文節までこだわる!Webサイトのテキストの読みやすさを実現する文字組み実装の例

文節、こだわってますか? レスポンシブサイト/スマホサイトでは 文章の折返し位置がデバイスによって 変わりますよね。 そんなの細かく いちいち調整してらんないよ、と思ってしまいますが、 クオリティの高いWebサイトではちゃんとやっている。 そんなツ…

新聞風のデザインのWebサイト『TEAM 202X 政策実現ドキュメント・メディア』のフォントやレイアウトがイケてる

昨日シフトブレインさんがケースステディとして公開していたWebサイト『TEAM 202X 政策実現ドキュメント・メディア』 ケーススタディ「TEAM 202X 政策実現ドキュメント・メディア」を公開しました https://t.co/ytEjLmMHkp — シフトブレイン/スタンダードデ…

【良記事ピックアップ】歯科予約システムの治療履歴画面(基本〜応用、デザイン編)

良記事は何年たっても役に立つ。 デザイナーなら読んでおきたい 良記事ピックアップシリーズ第2弾。 今回紹介するのは、4本の記事で構成される デザイン設計、デザインフローのお話。 「デザインには正解がない、でも最適なものはある」 ということで、歯…

【良記事ピックアップ】タブUIの考察・最適解

デザイナーなら読んでおきたい 良記事ピックアップシリーズ。 Web屋の現場では、日々の情報収集が スキルに直結していく場面も多い。 普段からいかにアンテナを張って、 引き出しを増やしておくかが スキルアップへの近道であーる! というわけで、さっそく…

1画面内に自動で動く要素を2箇所以上いれないようにデザイン設計をしよう

リッチなUIが多くなってきた昨今の Webサイト。 ブラウザでの表現も豊かになり、 情報の見せ方が多様になってきています。 見栄えがいいからと言って、 なんでもかんでもリッチにすれば いいというわけではないので 基本、1画面内に動く要素が2つ以上ある …

記事一覧の俯瞰性の高さが秀逸なメディアのWebサイト3選

Webサイトでは ほしい情報にいかに早くアクセスできるか、 情報が見やすいか、ということにおいて、 UI/UXが非常に重要です。 今回は独断と偏見と主観による 記事の一覧性、俯瞰性が秀逸だなと おもったメディアのWebサイトを紹介します。 ライブドアニュー…

かっこいいデザイン、UIの管理画面の実装には映画のHUD、スクリーン・グラフィックを参考にしよう

Webサイトの運用には欠かせない管理画面。 管理画面は更新頻度の高いWebサイトでは 毎日さわるものです。 毎日さわるものなので、気分良く使いたいですよね。 かっこいい管理画面を使いたい。 かっこいい管理画面の実装に参考にしたいのが、 映画のHUD、スク…

モーダルウィンドウ実装の決定版。実装が超簡単、カスタマイズ性も高いモーダルウィンドウjQueryプラグイン「Modaal」

いまやほとんどのWebサイトやアプリで 導入されているUI「モーダルウィンドウ」 今回は超簡単に実装できてカスタマイズ性も高い、 jQueryプラグイン「Modaal」を紹介します。 最近では jQueryオワコンだなどという声も ありますが、適材適所。 jQueryはなん…

使いにくいUIでPVと広告収入が増える?記事を分割するUIが採用される理由

メディアサイトによく見られるUIですが、 一つの記事をページ分割、 ページネーションして 分けるサイトがあります。 ページネーションUI このページ分割することは、 UI/UXとしてはいいとは言えません。 ですが採用しているサイトは多いです。 とくにメデ…

スマホサイトのパンくず問題。長くなった場合、どう処理するのが適切か

スマホサイトに パンくずつけてますか? パンくずリスト - Wikipedia パンくずリスト(breadcrumb list)は、ウェブサイト内でのウェブページの位置を、ツリー構造を持ったハイパーリンクの一覧として示すもの。パンくずナビ、トピックパス、フットパスとも…

フォームのplaceholder属性はラベルの役割として使うのはやめたほうがいい

フォームのplaceholder属性は、 <input>要素のplaceholder属性で指定した値が、入力欄に初期値として表示されます。 例えば、テキストフィールドに初期値として、 「検索するキーワードを入力してください」などのヒントを示してユーザーの操作を補助することができ…

ネットスーパーのwebサイト構築の際に勉強になったスーパーマーケットの陳列レイアウトの雑学

ネットスーパーみなさん 利用したことありますでしょうか。 ネットスーパーとは、 既存のスーパーマーケットや店舗を持たない宅配専門の業者がインターネットで注文を受け付けて、既存店舗から主に個人宅まで注文商品を即日配達する宅配サービスのこと ネッ…

会員登録フォームでメールアドレスを2回入力させるのどうなの問題。導入したら問い合わせが減った例

会員登録フォームでたまーにある メールアドレス間違え防止のためのフォーム、 ありますよね。 「確認用に再度メールアドレスをご入力ください」 というやつです。 メールアドレスを入力したすぐその下にあるやつですが、 これ意味なくない?というのが僕の…

フォームの姓名、電話番号、郵便番号...など入力フィールドを分割するべきか問題

先日ツイッターで見かけた フォームの入力フィールドを分割するべきか問題。 一般的なフォームで、名前や電話番号の入力欄の分割をやめるよう指摘すると、DBの都合でできないと言われることがある。なぜDBのフィールドを分けるのか聞くと、「できるだけ細か…

運用負担が激減。WebサイトやWebサービスは「よくある質問」を充実させろ

受託でWeb制作10年以上やってます。 そうするといろんなWebサイト、Webサービスの 立ち上げや運用に携わります。 BtoBのものもあれば、 BtoCのものもいろいろ経験してきました。 今回は主にBtoCのWeb運用の話。 そのWebサイト/Webサービスのユーザ層にも よ…