とある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プロパティ CSSでは、指定した領域をはみ出したときに、テキストを三点リーダー「...」で省略するプロパティがありますよね。 developer.mozilla.org ただこちら、1行…

ここで差がつく!ディレクターの豆知識に。消費増税の大手各サイトのメンテナンス時間まとめ

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

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

フォント選びに役立つ定番の有名おすすめフォントの数々を紹介している良記事を3つ紹介します。フォントに迷ったら定番の有名フォントを使っておけば間違いなし。 ではさっそくひとつめ。 ひとつめは、以下のツイートより。 フォロワーさん増えたので、おス…

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

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

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

デキるWebデザイナー、ディレクターは固有名詞を間違えない。細かいところまで気配りしている人が多いですよね。 そう言えば、文書やメッセージのやり取り時に固有名詞を適切に表現してる人は、仕事において細かい所まで気を配れる人という評価をするんだけ…

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

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

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

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

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

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

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

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

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

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

どうしてる?Webサイト制作に関係ないクライアントからの質問や相談の受け答え

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

手軽に時短!ひとつの画像をアップするだけでfavicon(ファビコン)などのアイコン各種を一発作成!マルチアイコンジェネレーター

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Webサイト、WebページでPDFを掲載したいとクライアントから要望をもらうことがよくあります。よくある要望としては以下のようなかんじ。 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割 というキャッチの書籍、 「けっきょく、よはく。 余白を活かしたデザインレイアウトの本」 を別の視点で見ると、 企画、プレゼン力、提案の勉強になり いい訓練になる、というお話です。 書籍の内容紹介 この書籍は、 お題…

「noteカイゼン報告」はサービスの改善、アイデアが詰まっているので勉強になる

ここ最近Web系の情報収集を していく中で、note に書かれた 記事を目にしない日はないので、 note の勢いがすごいなと思っています。 web業界で note を知らないひとは ほぼいないとおもいます。 note.mu note はサービスの改善がすごい note の何がすごいか…

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

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