とあるweb屋の仕事術

とあるweb屋の仕事術

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

デザイン参考

デザインのインスピレーションに。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 マテリアルデザインのブレイクポイントシステム ブレイクポイントは細かく設定しすぎる…

2019年5月19日の気になるIT・Web界隈の記事まとめ

デザイナ目線でピックアップ、 IT業界・Web界隈の気になる記事まとめ、 2019年5月19日号です。 note.mu jp.techcrunch.com note.mu hbol.jp www.itmedia.co.jp speakerdeck.com goworkship.com coliss.com speakerdeck.com ------- 以上です。 こんなかんじ…

2019年5月18日の気になるIT・Web界隈の記事まとめ

デザイナ目線でピックアップ、 IT業界・Web界隈の気になる記事まとめ、 2019年5月18日号です。 気になるニュース・動向 楽天がライブ動画に参入「Rakuten LIVE」 誰でも配信OK、コマース機能も - ITmedia NEWS 意匠法改正が変えるWebサイトリリース・リニュ…

2019年5月16日の気になるIT・Web界隈の記事まとめ

デザイナ目線でピックアップ、 IT業界・Web界隈の気になる記事まとめ、 2019年5月16日号です。 目立った動きはとくになし、 それではまとめ、どうぞ。 ics.media qiita.com note.mu weba11y.jp book.mynavi.jp careerhack.en-japan.com note.mu coliss.com w…

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

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

2019年5月14日の気になるIT・Web界隈の記事まとめ

デザイナ目線でピックアップ、 IT業界・Web界隈の気になる記事まとめ、 2019年5月14日号です。 ボリュームなかなかです。 いろいろ動きがありました! チェックしておきましょう! 気になる動向・ニュース 「CS6以降のアプリがいつでもすべて使える」という…

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

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

2019年5月11日の気になるIT・Web界隈の記事まとめ

デザイナ目線でピックアップ、 IT業界・Web界隈の気になる記事まとめ、 2019年5月11日号です。 気になる動向・ニュース Facebook のアプリアイコン変わる Adobe CC、利用可能バージョンに制限 フェイスブックの仮想通貨プロジェクトに関する新たな情報 勉強…

2019年5月8日の気になるIT・Web界隈の記事まとめ

デザイナ目線でピックアップ、 IT業界・Web界隈の気になる記事まとめ、 2019年5月8日号です。 気になる動向・ニュース セブン&アイHDがレジ袋全廃へ 紙袋などに変更、2030年目標 GoogleがiFrameに代わる遷移タグPortalsをデモ、サイト間の連携を大幅強化へ …

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

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

2019年5月7日の気になるIT・Web界隈の記事まとめ

デザイナ目線でピックアップ、 IT業界・Web界隈の気になる記事まとめ、 火曜日の2019年5月7日号です。 いろいろ動きがありました。要チェックですね。 気になる動向・ニュース Twitter、画像・動画付きでリツイートできるように iOSが独自にスワイプ入力方式…

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

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

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

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

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

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