とあるweb屋の仕事術

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

考え方・発想

成果物を他人にフィードバックしてもらうときは100%自分で納得したクオリティまで上げてから出そう

ベイジさんの社内日報 入社2年目で身につけたwebデザインの5つの習慣 | ベイジの日報 こちらにある内容が 3000回いいねしたい内容でした。 「自分の中で100点を取ってからフィードバックをもらう」 ある人が、後輩をレビューする際に「このデザインって自分…

クックパッドのトップページにはh1タグがない件の考察

タイトルのとおりですが、 今回はクックパッドのwesサイト トップページにh1タグがないのを 先日発見したというか、たまたま 見ていてあれーと思ったので、 そんな記事です。 クックパッドのトップにはh1タグがない 2019/08/24時点で、 PCサイト、スマホサイ…

食べログのPCサイトのSEO。h1タグの使いどころが工夫されている件

Webサイト製作の勉強には 大手サイトのソースや設計、 つくりをみるのが勉強になる! ということで、 今回は 食べログサイトの h1タグ の話。 食べログは古くからあるサイトなので、 PCサイトのデザインや設計は割と 古いところがあるかもしれませんが、 h1…

企画・プレゼン力・提案力を養う。別の視点でみる『誰も教えてくれなかった「余白」デザインがわかる本。けっきょく、よはく。 余白を活かしたデザインレイアウトの本』

今回は、デザインは「余白」が9割 というキャッチの書籍、 「けっきょく、よはく。 余白を活かしたデザインレイアウトの本」 を別の視点で見ると、 企画、プレゼン力、提案の勉強になり いい訓練になる、というお話です。 書籍の内容紹介 この書籍は、 お題…

日本経済新聞Webサイト日経電子版のベータテスト/ベータ版「新しい電子版」デザインがいい感じ

日本経済新聞のWebサイト 日経電子版を見ててつい最近、 PCサイトのトップページのヘッダに 「新しい電子版で見る」のボタンが あることに気づきました。 ヘッダ左上に「新しい電子版で見る」のボタンが https://www.nikkei.com/ 左上にある青いボタンです。…

スマホサイトに記載されている電話番号は「<a href="tel:電話番号">」で電話発信用リンクにするべきか

スマホサイトにある 電話番号はリンクにすべきか問題。 店舗を取り扱っているWebサイト であればお店の電話番号が掲載されているし、 会社サイトであれば 会社概要に電話番号が掲載されています。 ECサイト、ネットショップであれば、 特定商取引法に基づく…

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

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

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

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

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

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

デザイナーがUI設計/デザインする上で持っておきたい大切な3つの視点・意識

デザインをする上では、 重要な3つの視点があります。 ユーザ視点 クライアント視点 開発者視点 この3つはデザイナーに必要な視点であり 常にもっておきたい「意識」です。 デザインを設計する上で一番大切なのは、 やはり「ユーザ視点」です。 ユーザにと…

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

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

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

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

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

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

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

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

ヒアリング能力は質問力。質問力、大事。ディレクションやコミュケーションでの質問力の重要性。

質問力、だいじ。 web業界では「質問力」が とても重要なスキルです。 さまざまな場面で必要になるからです。 この業界の門戸をたたくときから必要です。 就職・転職時の面接での質問タイム 組織・チーム内での同僚、先輩や上司とのコミュニケーション クラ…

技術のトレンドをいつキャッチアップするか。アーリーアダプターが強い。

web製作業界の技術のトレンド。 フロントエンド界隈、バックエンド界隈ともに 日々、めまぐるしく状況が変化しています。 技術のトレンドを追うにも情報量も多く なかなか追いつかなかったりします。 どれがモダンでトレンドなのか、 自分はどれを取捨選択し…

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

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

「おすすめ」と「オススメ」どっち?webサイトでの表現に迷ったら、Googleの検索結果が多いほうを採用しよう。

webサイトの表記で、 たまーにどっちの文言表記のほうが 表現としていいのか迷うことがあります。 たとえば「おすすめ」というワード。 カタカナ表記しているwebサイトもよく見かけます。 「おすすめ」 「オススメ」 「お薦め」 どれがよいでしょうか。 どの…

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

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

検索能力は問題解決能力。web製作の現場では調べる力、検索能力のスキルも重要。

組織やチームでweb製作するメリットのひとつ として、知識量と経験値があります。 課題や問題にぶち当たったときに、 自分ひとりの知識や経験だけでなく チーム内の全員の知識と経験がプラスされるので、 解決が早かったり、自分ひとりではたどり着けない ア…

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

検索ワード打ち違いのユーザへのアプローチはSUUMOサイトを見習いたい

メガネのJINSに続いて、 参考にしたいSEOのちょっとしたTipsです。 SUUMO(スーモ)Webサイトは検索機能なども とても参考になる不動産のポータルサイトですが、 SEOでちょっとおもしろいことをやっています。 なるほどなぁと感心したのでご紹介。 SUUMO(ス…

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

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