とあるweb屋の仕事術

とあるweb屋の仕事術

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

大手サイトの事例

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

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

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

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

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

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

内部SEOとして優秀なアダルトサイトに学ぶ記事タイトルの付け方。記事タイトル超長い。究極のSEO

今回はアダルトサイトの 商品タイトルや記事タイトルが SEOとして優秀すぎる、 というお話です。 アダルトサイトにいいイメージを 持っていない人も多いと思いますが、 世の中の革新的なテクノロジーの 進化にエロはつきもの。 エロサイトが常に世の中の 技…

クックパッドのプレミアムサービスのお試し利用に学ぶ、Webサイトやサービスを継続的に利用してもらう方法「ゲーミフィケーション」

WebサイトやWebサービスは 継続利用してもらってなんぼ、 ということで 継続的に利用してもらうにはどうすればいいか、 という点において少しヒントになるような良記事を紹介します。 shumaiblog.com ↑こちらの記事では少し古いですが クックパッドが有料で…

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

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

カップヌードル広告「修正になんでも応えてくれるデザイナーさん」

受託のクライアントワークで 先方担当者から フィードバックで修正依頼を 何度か受けていて、ふと思い出した 以前バズって話題になっていた カップヌードルの広告をご紹介。 話題になっていたのは2017年。 知らない人もいると思うので、 ぜひ見ていただけた…

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

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

【良記事ピックアップ】検索窓だけのトップページ!神戸市のWebサイトが攻めている件。

今回は良記事ピックアップというよりは、 いいサイトの発掘的な感じになります。 紹介するのは神戸市のWebサイト。 まずはご覧ください。 神戸市:トップページ トップページが検索の機能に特化している みてわかるとおり このサイトのユニークな点は、 トッ…

Udemy(ユーデミー)の有料講座をプレゼントする機能がいいなと思った話

以前紹介したUdemy(ユーデミー)ですが、 なにげに見ていていいなと思った機能が あったので、ご紹介。 タイトルのとおりで なんてことはないただの プレゼント機能です。 Udemy(ユーデミー)の有料講座をプレゼントする機能 そんなの世の中のWebサービス…

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

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

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

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

overflow-y:scroll で横スクロールはさせたいけどスクロールバーを出したくない場合の対処法

スマホサイトでは スワイプして横スクロールで コンテンツを見せたり、 ナビゲーション操作させたりと 横スクロールは省スペースで コンテンツを展開するUIとして 優秀なUIです。 横スクロールの実装は、 CSSで簡単にできます。 overflow-y:scroll; ですね。…

全国展開のWebサイトにおける地域の分け方(エリア、都道府県の区分)

全国規模での コンテンツを取り扱う Webサイトでは必ず地域での セグメントがあります。 コンテンツの検索や、 ぐるなびや食べログ、 不動産のWebサイトのように 入口が地域で分かれていたりします。 ユーザ視点ではあまり意識することは ないかもしれません…

Bingのクローラーからの大量アクセスによりサイトがダウンしかけた話

日々、世界中のWebサイトの情報を収集する クローラー。 僕の勤めている会社では 大手のクライアントのwebサイトのサーバ保守も やっているのですが、数年前にこのクローラーが 大量にアクセスしてくることでサーバに負荷が かかり、サイトがダウンしかけた…

有名どころのブランドカラー、ガイドライン、リンクカラーの参考サイトまとめ

SNS、webサービスの有名どころの カラーをまとめているwebサイトのメモ。 配色のアイデアに、デザイン時のカラーピックアップに。 guidelinecolour.com www.ukar.jp weboook.blog22.fc2.com そのほか、 意外に悩ましいリンクカラーについて。 大手のwebサイ…

会員登録率アップの魔法のことば。「会員登録は30秒で完了します」は優れた会員登録へのアプローチ

webサイトやwebサービスで ユーザに疎まれる機能のひとつに会員登録機能があります。 本当にめんどくさい。 コンテンツを利用しようとしたときに出てくるログイン画面と会員登録への導線。 ユーザの皆さん、うざいと思ったことあると思います。 「面倒だから…

webデザイナーも知っておきたい、外部サービスのアカウントでログインするOAuth認証/OpenID認証について

うちの新人webデザイナーが知らない、 ということだったので今回はOAuth認証/OpenID認証ついて。 OAuth(オーオース)認証/OpenID認証とはざっくりいうと TwitterやFacebookなどの外部サービスのアカウントで ログインをする仕組みのことです。 詳しい仕組…

黒丸●になるパスワードを可視化するべきかの考察。フォーム最適化(EFO)

ログインや新規登録でのパスワード入力。 日常でさまざまなwebサービス、サイト、アプリを 利用しているユーザにとっては一番よく使うフォーム ではないでしょうか。 といってもログインが保持されていれば初回の入力 以降はめったに入力する機会がないかも…