とあるweb屋の仕事術

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

デザイン参考

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

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

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

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

『記事タイトルと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サイト。 まずはご覧ください。 神戸市:トップページ トップページが検索の機能に特化している みてわかるとおり このサイトのユニークな点は、 トッ…

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

SNSアイコンは公式のカラーにするべきか

先日webサイトのリニューアルのデザインの 打ち合わせの際にクライアントから質問されました。 「SNSアイコンって各SNSの公式のカラーじゃなくていいんですかね」 質問されたとき「おっ」と思いました。 というのもあまり意識したことがなかったからです。 S…

ゴシック体と明朝体が混ざったおもしろいwebサイトとロゴの話

webサイトでは、 ゴシック体、明朝体だいたいどちらかに 統一されていて、さらに使用するフォントの 種類は多くて3種類くらいまでが一般的 だと思います。 先日なにげにみていておもしろいフォントの webサイトがあったのでご紹介。 電通報のwebサイトです…

ウェブクリップアイコンの参考にもなる、iPhone・iPadアプリのおしゃれなアイコンデザインギャラリー

スマホ端末でウェブサイトをホーム画面に追加すると、 ホーム画面にアイコンが追加されます。 これをウェブクリップアイコンといいます。 apple-touch-icon(アップルタッチアイコン)とか 呼ばれることもあります。 このウェブクリップアイコンの作成も web…

全国規模・全国展開のWebサイトのエリア検索のデフォルト値はよく利用される地域か現在地にする

全国規模、全国展開のコンテンツを取り扱う Webサイト/Webサービスではエリア検索や 地域ごとの情報に出し分けて表示しています。 取り扱うコンテンツの特性にもよりますが、 基本は利用者が多い地域をメインにもって くるとよいです。 どこかの地域に特化…

デザインの引き出しの多さが差をつける!デザインスクラップはイラレのアートボードにベタベタ貼り付ける方法がおすすめ

アイデアのひらめきや、 デザインの引き出しを増やすには 普段からクオリティの高いデザインに ふれて目を肥やしておくことが大切です。 ただ見ておわるのではなく、 いつでもそのアイデアや引き出しをひきだせる ようにしておきたい。 いいデザインは反復し…

全国展開コンテンツのWebサイトでのエリア選択に日本地図はいらない問題

Webサイトは四角い...という話は 以前しましたが、今回もそれに近いお話。 日本全国の各地域で展開するサービスや 業界などのWebサイト、Webサービス案件は ごろごろありますよね。 そこで必ずある機能が地域・エリアごとの 検索やコンテンツです。 たとえば…

そのフォント何使ってるの?画像からフォント解析できるツール(Twitter最強説)

デザイナーであればバナー画像や看板、 広告、お店のメニュー表などを見て 「いいフォントだな、なんのフォントだろう?」 と思うことがよくあると思います。 そんなときに便利なのが、フォント解析ツール。 カメラで撮影すると類似したフォントの候補まで出…

これ指定しときゃOK!洗練されたデザインになるグレースケール系のカラーまとめ(ボーダー/テキスト/背景)

Webサイトのデザインをしていて なんか野暮ったいな、 なにか締まりがないなと感じたことありませんか? 余白やコンテンツの配置、レイアウト... さまざまな要因が組み合わさってデザインは洗練されていくもの。 Webサイトのデザイン要素の中で ボーダーカラ…

うわっ...Webサイト、四角すぎ...?ハッとするデザインを盛り込もう

Webサイトって四角いですよね。 まぁそんなこというと ほとんどのものは四角いのですが。 Webサイトはしょせんはグリッドで レイアウトされているので、 とにかく四角い。 そんな四角いWebサイト、Webデザイン ではありますが、ハッとするデザインって ある…

楽天市場のネットショップのHTMLがtableタグ、tableレイアウトの理由

楽天市場のネットショップは、 数々の企業が出店しています。 出店申し込みからなんやかんやして RMSという店舗運営システムを利用して ネットショップを構築していきます。 www.rakuten.co.jp 通常の楽天RMSでは レイアウトなどにいろいろと 制限があり、あ…

HTMLメルマガ作成はこれだけ見ておけばOK!参考になる記事まとめ

先日HTMLメルマガを実装する機会が あったので、作成の参考にした良記事を まとめておきたいと思います。 検索するといろいろなメルマガテンプレートが ありますが、各種メールソフトで確認すると、 実用に耐えうるレベルじゃないものが多いなという 印象を…