とあるweb屋の仕事術

とあるweb屋の仕事術

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

Tips

【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の使用宣言と同…

成果物を他人にフィードバックしてもらうときは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ページへのPDF埋め込みの要望は意外に多い Webサイト、Webページで PDFを掲載したいと クライアントから要望を もらうことがよくあります。 PDFをインラインで表示したい PDFをサムネイルのように表示したい PDFを埋め込みたい 別ページに飛ばしたくない…

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

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

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

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

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

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

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

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

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

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

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

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

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

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

デザイン/UI設計・情報整理の基本。デザインを構成する要素を差別化して視覚的階層を意識して作ろう

デザインは整形して見た目をきれいにすることではなく、本質は問題解決、情報設計、情報整理です。 今回は「情報整理」にフォーカスをあてた記事を紹介します。 Webサイトの実装にあたってのデザイン作業を細分化すると「UI設計」というフェーズがあります。…

『記事タイトルとURLコピーする』機能いいよね

ブログやメディアサイト でたまにみかける機能ですが、 『記事タイトルとURLコピーする』ってやつ。 いいですよね。 はじめてみたとき、 あーこれいいなって思ったんですよね。 誰かに共有したいときが楽で。 共有する場面といえば、 SNSに投稿するか、 Web…

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

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

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

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

内部SEOとして優秀なアダルトサイトに学ぶ記事タイトルの付け方。記事タイトル超長い。究極のSEO

今回はアダルトサイトの 商品タイトルや記事タイトルが SEOとして優秀すぎる、 というお話です。 アダルトサイトにいいイメージを 持っていない人も多いと思いますが、 世の中の革新的なテクノロジーの 進化にエロはつきもの。 エロサイトが常に世の中の 技…

クックパッドのプレミアムサービスのお試し利用に学ぶ、Webサイトやサービスを継続的に利用してもらう方法「ゲーミフィケーション」

WebサイトやWebサービスは 継続利用してもらってなんぼ、 ということで 継続的に利用してもらうにはどうすればいいか、 という点において少しヒントになるような良記事を紹介します。 shumaiblog.com ↑こちらの記事では少し古いですが クックパッドが有料で…

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

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

クオリティの高いWebサイトは文節までこだわる!Webサイトのテキストの読みやすさを実現する文字組み実装の例

文節、こだわってますか? レスポンシブサイト/スマホサイトでは 文章の折返し位置がデバイスによって 変わりますよね。 そんなの細かく いちいち調整してらんないよ、と思ってしまいますが、 クオリティの高いWebサイトではちゃんとやっている。 そんなツ…

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

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

新聞風のデザインのWebサイト『TEAM 202X 政策実現ドキュメント・メディア』のフォントやレイアウトがイケてる

昨日シフトブレインさんがケースステディとして公開していたWebサイト『TEAM 202X 政策実現ドキュメント・メディア』 ケーススタディ「TEAM 202X 政策実現ドキュメント・メディア」を公開しました https://t.co/ytEjLmMHkp — シフトブレイン/スタンダードデ…

【良記事ピックアップ】検索窓だけのトップページ!神戸市のWebサイトが攻めている件。

今回は良記事ピックアップというよりは、 いいサイトの発掘的な感じになります。 紹介するのは神戸市のWebサイト。 まずはご覧ください。 神戸市:トップページ トップページが検索の機能に特化している みてわかるとおり このサイトのユニークな点は、 トッ…