とあるweb屋の仕事術

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

Web製作あるある

【錯覚資産】webデザイナーは初校が大事で最重要。成果物の第一印象がその後の制作フローすべてに影響することを意識しましょう

デザインの初校で信頼度が決まり、 信頼度が仕事の進めやすさに影響する というツイートを見ました。 デザイン提出の初校でつまづくと信頼度が低い所からのスタートになるのでやりづらい事が多い。逆に、すんなり通ると信頼してもらえやすいので仕事も進めや…

サクッとアクセシビリティを確認するのに便利。色覚シミュレーションアプリ「色のシミュレータ」

今回は少しだけアクセシビリティよりのお話。 便利なアプリを紹介します。 「色のシミュレータ」です。 色のシミュレータ Kazunori Asada 教育 無料 apps.apple.com アプリの紹介テキストをそのまま引用します。 「色のシミュレータ」は、様々な色覚特性を持…

記事の中身や概要がわかるOGP画像がいい!記事の要約をOGP画像に全部いれてしまおう

OGPだけで記事の中身や概要がわかるのって いいですよね。 アイキャッチやOGP画像は、 サイト運営する上でかなり重要な要素ですが、 まじめに作成するとなると結構な手間と労力を 必要とするので、いちいち作成していられない という方も多いと思います。 ク…

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

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

消費増税の大手各サイトのメンテナンス時間まとめ

web屋のみなさま、 消費増税の対応、おつかれさまでした。 いや疲れましたね...。 9/30から10/1にかけての深夜から早朝まで 消費増税対応に追われましたが、 なんとか無事対応完了することができました。 消費増税のようなイベントは、 Webサイトを保守する…

固有名詞は辞書ツールで単語登録すべし。細かい所まで気を配る&入力間違いもナシで効率化、一石二鳥。

先日こんなツイートを見かけました。 そう言えば、文書やメッセージのやり取り時に固有名詞を適切に表現してる人は、仕事において細かい所まで気を配れる人という評価をするんだけど、この判断方法結構当たる例・macbook pro -> MacBook Pro・airpods -> Air…

Webサイトのわかりやすさの正体は常識と慣習。見たことがある、使ったことがあるUIはわかりやすい

Webサイトのわかりやすさのひとつの基準。 それは「使い慣れたものである」ということがあげられます。 先日こんなツイートを見かけました。 リンクを押させたいなら「青字下線リンク」に勝るクリエイティブはないダサいかもしれないが、とにかくクリックさ…

サポートセンターじゃねぇぞ!と思っても、Webサイト制作に関係ないクライアントからの質問や相談は邪険にしないで丁寧に応対しよう

Web制作あるあるですが、 クライアントからWebサイトに 関係ないことで質問や相談を 受けることがたまーにあります。 たとえば 「PCが動かなくなった」 「PCを変えたらメールが受信できなくなった」 「印刷設定が変わってしまった」 などなど。 クライアント…

デザイン案を印刷するときの用紙サイズは A3 がおすすめ!企画提案・プレゼンの印象を少しでもよくしよう

Web製作のフローで デザイン案をクライアントに 提案・プレゼンするフローは 必ずあります。 最近だとプロトタイプを作って 実際にブラウザ動かし画面上で 提案し、クライアントに見て もらうことも多いと思いますが、 プロトタイプと合わせて、紙で 印刷し…

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

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

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

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

不具合や技術的な問題が起きたときのガイドライン、テンプレ。クライアントからの質問の質が低い場合は正しく伝えてもらうように誘導しよう

今回はクライアントワークでの コミュニケーションのお話。 先日こんなツイートを見かけました。 技術的な問題で質問する時質問側がちゃんと状況説明できないと難航する。〈悪い例〉サイトが急に動かなくなった!〈良い例〉wordpressで作ったサイトに○○をし…

LP(ランディングページ)制作費用40万は高いのか?相場はいくらか?Web製作の現場のリアルな話。

LP(ランディングページ)の 制作費用に関してこんなツイートが。 LP制作費が40万〜と答えると「たかっ!」っていう人多いです。確かに1ページとして考えるとめちゃくちゃ高いかもしれませんが、目標を達成するための必要な情報を凝縮させる1ページを作るの…

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

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

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

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

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

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

Webサイトの修正依頼・フィードバックをどこまでやるかの線引きと仕切り

Webサイト製作の過程で、 クライアントの確認のフェーズが かならずありますが、そのあとには だいたい修正要望・修正依頼があります。 フィードバックというやつですね。 この修正依頼というやつは なかなか注意が必要です。 言われるがままにやりだすと エ…

1画面内に自動で動く要素を2箇所以上いれないようにデザイン設計をしよう

リッチなUIが多くなってきた昨今の Webサイト。 ブラウザでの表現も豊かになり、 情報の見せ方が多様になってきています。 見栄えがいいからと言って、 なんでもかんでもリッチにすれば いいというわけではないので 基本、1画面内に動く要素が2つ以上ある …

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

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

結論から言う、具体的に言う、箇条書きにする。要点をまとめて相手に物事をわかりやすく伝える方法。

Web製作で一番むずかしいのは コミュニケーションです。 デザイン設計やシステム設計、 プログラミングなど実装レベルの業務も もちろん難しいですが、プロジェクトを うまく進行するには、 コミュニケーションスキルが必須で、 いちばんむずかしく、悩まし…

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

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

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

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

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

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

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

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

ランディングページにコストかけるかどうか問題。まじめにやると1サイト制作分のコストかかりまっせ

企業のイベントやキャンペーンなどの ランディングページなんて 無料ホームページ作成ツールで つくればいいじゃん。 と思っている、n太郎です。 お客さんからよく イベントやキャンペーンなどをやるから それに合わせて既存サイトのデザイン枠 の中ではなく…

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

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

ペッパーくんに搭載されているタブレットで動作するwebシステム・業務ツールを開発したときの話

3年くらいまえの話です。 以前ペッパーくんに搭載されている タブレットで動作する webシステム・業務ツールを 開発したことがありました。 とくに学びになるような話でもないのですが、 まぁ思い出話的な。 ペッパーくんの胸にあるタブレットは、 なんてこ…

PCの画面上ならなんでも測れる定規・ルーラーアプリがめちゃくちゃ便利。px幅をサクッと確認

Mac限定になりますが便利なアプリをご紹介。 web製作をしていると、幅や高さを知りたいという 場面がよくあります。 レイアウトやバナー、アイコンのサイズ、 余白などなど。 他のwebサイト見ていてサクッとサイズ感を 確認したい。そんなときに便利なアプリ…

webサイトの画像を簡単には保存できないようにするCSS「pointer-events」が便利

クライアントワークの webサイトの受託案件で たまにくる要望。 「画像保存できないようにしてほしい」 web製作あるあるだと思います。 結論から言うとwebサイトの画像を 保存できなくする方法はありません。 webにあがっている以上、それは どうしようもな…

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

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