とあるweb屋の仕事術

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

デザイン参考

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

まだtableで消耗してるの?スマホサイト、レスポンシブサイトでのtableのUIどうする問題

スマホサイトやレスポンシブの Webサイトで厄介なのが 表組み(table)です。 表が2列3列程度であれば 問題ありませんが、列が多いtableや、 セルの項目のテキスト量が多いtable組みの ような横に長いレイアウトは 幅の制約があるスマホサイトや レスポン…

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

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

レスポンシブWebデザインのブレイクポイントの設定2019年度版

レスポンシブWebデザインでの ブレイクポイントの設定の目安に なるのがマテリアルデザインの ブレイクポイントの数値です。 Responsive layout grid - Material Design マテリアルデザインのブレイクポイントシステム ブレイクポイントは細かく設定しすぎる…

広告バナーには規格がある!2カラムのWebサイトのサイドカラムの幅は広告バナーサイズを基準にするといい

モバイルファーストな世の中ですが、 今日はPCサイト寄りの話。 モバイルファーストとはいえど、 モバイルサイトのデザインオンリーで 考えるクライアントはまだまだ少ないです。 モバイルファーストだけど PCサイトもしっかり構築する、 というかんじ。 ス…

メインビジュアルにスライドショー、カルーセルUIを採用しても意味ない問題

トップページの最上部、 ファーストビューによくある カルーセルUI、スライドショーのあれ。 メインビジュアルとか キービジュアルとか ヒーローヘッダとか いろいろ呼び名はありますが、 とにかくスライドして大きな イメージが流れるあれ。 すっかり定番の…

文字詰めを制するものはデザインを制す。カーニングでクオリティアップ!カーニングの参考になる良記事まとめ

カーニングを極めたいあなたに送る良記事 まとめです。 カーニング - Wikipedia カーニング(英語: kerning)とは、主に欧文の組版において、プロポーショナルフォントの文字同士の間隔(アキ)を調整する技法のこと。 カーニングを行わない場合は、文字の間…

Bootstrapの無料のテーマギャラリーサイト Bootswatch が便利&参考になる

Bootstrapとは ウェブサイトやWebアプリケーションを作成するフロントエンドWebアプリケーションフレームワークである。タイポグラフィ、フォーム、ボタン、ナビゲーション、その他構成要素やJavaScript用拡張などが、HTMLおよびCSSベースのデザインテンプレ…

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

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

新聞の俯瞰性の高さとwebでの情報の見せ方についての考察

新聞のデザインについて。 新聞はパっと見て、ニュースを把握できる すばらしいレイアウトだよな〜というお話から。 瞬時にいまの時事ニュースが 把握できる可読性・一覧性の高さは なかなかwebでは再現できませんよね。 webのメディアは整列されてきれいに …

webサイトの画像の形式。png、jpg、svg...使い分けはどうするのが正解か

webサイトの画像はさまざまな形式で 掲載されています。 一般的なものとしては、PNG、JPEG、GIF、SVG。 そのほか最近では APNG、WebPという画像形式までてきました。 それぞれの使い分け、おさらいしましょう。 詳細は本記事の最下部に掲載した参考サイトを …

webサイトにIEでアクセスしてきたユーザには別のブラウザを推奨しよう

いまだにはびこるIEユーザ。 webサイトの進化をさまたげる害悪ブラウザは、 使わないようにユーザに別のブラウザを案内しましょう。 ie-buster.qranoko.jp IE Busterは上記のとおり、ユーザにChromeを 促すJSです。導入はめちゃくちゃ簡単。 HTML内にCDNのJS…

リニューアル前どんなだったっけ?過去のwebサイトを閲覧できるサービス Wayback Machine

webデザイナーあるある、 webサイトの過去のデザインみたいとき。 そんなときは Wayback Machine で確認しましょう。 Wayback Machine は、インターネットアーカイブ(Internet Archive)が保存しているウェブサイトを閲覧できるサービスです。 URLを入力し…

空港サイトのリニューアル提案のときに考えたこと。言語が違っても認識できるピクトグラムの話

受託で某空港のwebサイトの保守業務を やっていたことがあり、デザインの フルリニューアルの話があがった際に 提案をだしたことがあります。 そのときに考えていたことや提案した内容の一部、 当時デザイナチームで話していたこと。 空港のWebサイトなので…

多言語サイトの言語切り替えのUIの考察

先日、受託案件で 多言語サイトの案件があったのですが、 そのときに少し考えた話。 多言語展開のwebサイトでは 言語の切り替え機能があります。 言語の切り替え機能は、 主に以下のUIパターンが考えられます。 プルダウンでの言語選択式 ヘッダ、フッタなど…

雑食系エンジニアTVのKENTAさんの名刺の考え方が勉強になる

エンジニアのキャリアハック情報を 発信しているKENTAさんのYouTubeを 最近見ているのですが、名刺の話が 勉強になったので、ご紹介。 エンジニアという職業における「名刺」の重要性について説明します。 デザイナ視点ではまず思いつかないなぁという 発想…