とあるweb屋の仕事術

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

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

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

webサイトでは珍しいUIや奇をてらったデザインはNG。アフォーダンスをうまく取り入れよう

わかりやすいwebサイト、使いやすいwebサイトとは何かを考えさせてくれる 良ツイートを発見。 Webサイトで「珍しいデザイン」を用いるのはNGだ例えば下記のECは「+」「-」で数量を変更できるが、見慣れないため、何のボタンか分からない(数量との関連性が…

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

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

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

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

有料Webサービスでの同時ログイン制御をどうするか。サブスクリプションサービスの同時視聴、同時再生、同時使用のパターンまとめ

先日クライアントワークで 月額の有料のWebサービスの案件をリリース しまして、そのときにアカウントの 使い回しについて考察する機会があったので、 有名なサブスクリプション系のWebサービスは どうなってるかなというところをざっくり 調べてみたので、…

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

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

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

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

【良記事紹介】フォントに迷ったらとりあえず定番の有名フォント使っておけば間違いない。おすすめフォント記事3選

フォント選びに役立つ定番の有名おすすめフォントの 数々を紹介している良記事を3つ紹介します。 フォントに迷ったら定番の有名フォントを ではさっそくひとつめ。 ひとつめは、ツイートですが、下記です。 フォロワーさん増えたので、おススメの書体載せと…

【Webデザイナー、ディレクターとしての経験を爆上げする方法】場数を踏む。自発的に何でもやる、勝手にやる、面倒なタスクを積極的に引き受ける

Webデザイナーやディレクターとしての 経験を上げたい。でも経験ばかりは、 ある程度の期間を必要とするのですぐに どうこうできるものでもないし、難しい。 そう考えているひとも多いと思います。 たしかに「経験」は他人から得られるものでも ないですし、…

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

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

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

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

【良記事紹介】meta descriptionのベストプラクティス。指定しない(Googleの自動抽出にまかせる)という考え方

サイトの meta description を指定せずに Googleの自動抽出にまかせる方針のほうが よいのでは、という良記事の紹介です。 www.waca.associates 一部引用します。 実務的に考えると、meta descriptionを1ページずつしっかりと考えるのは、かなりの手間です。…

一緒に仕事したいと思うWebエンジニア/デザイナーはゼロ回答をせずに代案を出す。

Web製作は、社内社外問わず なんといってもコミュニケーションの つらみが多いですよね。 Webエンジニアやデザイナーは クライアントやディレクター、 同じチームや組織のメンバーから 実現方法や仕様の相談を受けることが 多いとますが、こういうときにやっ…

スマホのディスプレイ、画面サイズ、解像度の種類の多さの説明に役立つ記事

モバイルファーストやレスポンシブデザインが 当たり前になってきている最近のWebサイト。 スマホ端末がどのくらい世の中にあるのか、 わかりやすい記事をご紹介します。 少し古いですがまずはこちら gigazine.net 可視化されているのでわかりやすいですね。…

最近よく見かけるCookieの使用を宣言したり使用にクッキーの使用に同意するUIはGDPR対策の一環

海外のサイトでよく見られる Cookie使用に同意するUIや クッキーの使用を宣言して ユーザに案内を促すUI。 ここ最近では少しづつ、 日本のWebサイトでも 見かけるようになってきました。 CNET Japan CNET Japan のサイトではフッターでCookieの使用宣言と同…

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

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

【時短ツール】favicon(ファビコン)やWebクリップアイコン、PC・モバイル各種アイコンジェネレーターで一発作成

Webサイト製作時には 設定が欠かせないアイコン類。 favicon(ファビコン)やWebクリップアイコン作成も Webデザイナーのタスクのひとつです。 まじめに一つ一つ作成すると結構な数になるため 各種のアイコン類を作成するのは 面倒ですし、手間も工数も意外…

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

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

YouTube埋め込み動画をPC、スマホで音声なしで自動再生する方法。レスポンシブで背景全面、背景動画にも。

サイトにYouTubeを掲載するときに 背景全面に動画を表示してデザインの 一部として利用するケースがあります。 背景でなくてもYouTubeをサイトに 設置して自動再生しておきたい。 ググったところ、 PCでは自動再生できても、 スマホではブラウザの制約上、 …

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

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

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

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

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

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

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

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

サイト側からロゴや写真素材を提供してシェアや販促に。Mr. CHEESECAKE のWebサイトでの販促の取り組みがいい!

先日見かけたツイートで、 販促の取り組みで、その発想は なかったな〜と感心したサイトが あったのでご紹介。 ツイートはこちら。 Webサイト側からロゴや写真を DLできるページを用意している ところがなるほど〜と思いました。 Mr. CHEESECAKE のロゴや各…

デキるデザイナー、ディレクターの条件。相手の時間を奪わない、負担をかけない、考えさせない。

ディレクターやデザイナーが Web製作する上で、手を動かす 実務より大切なことがあります。 それは 相手の時間を奪わない、 相手に負担をかけない、 相手に考えさせないやりとりを 心がけること、です。 気が利くかどうかがデキるWeb屋の条件です。 先日見か…

超簡単。Webサイトのページ内でのPDF埋め込み、インライン表示、疑似サムネイル化表示の実装は「Google Docs Viewer」がおすすめ。むずかしい実装は不要!

WebページへのPDF埋め込みの要望は意外に多い Webサイト、Webページで PDFを掲載したいと クライアントから要望を もらうことがよくあります。 PDFをインラインで表示したい PDFをサムネイルのように表示したい PDFを埋め込みたい 別ページに飛ばしたくない…

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

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

スマホの大型化でWebサイトの画面下の要素、見逃しちゃうことあるよね問題

スマホの大型化したことで Webサイトの画面下に配置してある要素、 たまに見逃しちゃうよね、という話。 先日こんな記事を読みました。 note.mu 大型化するスマホのディスプレイ、 そしてUIのトレンドに関する記事です。 大手のアプリの例を交えて解説されて…

深津さんの note の段落の余白(間隔)が見やすいので測ってみた

piece of cake CXOで、 THE GUILD代表でもある深津さんの note の段落の余白のとり方が めちゃくちゃ見やすい、 という話です。 note.mu 深津さんは note では UI/UXデザインに関しての記事や、 noteの新機能、機能改善についての 記事などなどを書かれてい…

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

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