とあるweb屋の仕事術

とあるweb屋の仕事術

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

Web製作あるある

スマホサイトに記載されている電話番号は「<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-y:scroll で横スクロールはさせたいけどスクロールバーを出したくない場合の対処法

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

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

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

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

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

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

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

2019年5月9日の気になるIT・Web界隈の記事まとめ

デザイナ目線でピックアップ、 IT業界・Web界隈の気になる記事まとめ、 2019年5月9日号です。 気になる動向・ニュース Instagram、アカウント停止に関するガイドラインを改定へ LINEアプリ「画像内の文字起こし」機能を追加!画像内のテキスト翻訳も対応 勉…

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

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

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

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

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

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

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

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

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

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

「それをやる意味...」目的を意識せよ。webサイト、webサービスの改善は見た目から考えるとうまくいかない

経験の少ない営業、ディレクター、 web製作者はなんでもすぐ「見た目」の話をしがち、 というおはなし。 webサイトやwebサービスのリニューアルや、 新規機能の導入といった企画・提案において、 見た目、つまりビジュアルの話をしがち。 本質の目的を無視し…

webページ(HTML)をPDF化するなら mPDF が便利。ただし使えるCSSが限定されるから注意。

「webページ(HTML)をPDF化したい。」 クライアントからそんな相談をされたら mPDF を使いましょう。 受託でweb製作をやっていると このニーズはそこそこ多くて 何回か要望いただいたことがあります。 とはいえPDF化するのも簡単ではありません。 要望を詳…

特定のブラウザだけCSSを調整したいときはハックを使おう

大手のナショナルクライアントの webサイトではいまだにIEが捨てきれずに 動作保証範囲としているwebサイトも多いと思います。 Microsoftが、企業にIE11の使用をやめるように 推奨はしているものの、ユーザの使用率によっては 捨てられないwebサイト、サービ…

クライアントからもらう資料のテキストをそのままコピペするとスペースやゴミデータがはいることあるので注意

クライアントから資料をもらって、 webサイトにテキストを掲載するとき。 クライアントは、パワポやWordファイル、 エクセル、CSV、PDF...などなどいろいろな ファイル形式で送ってきますよね。 実装あるあるなんですが、 それらのファイルからテキストをコ…

修正が反映されない!?webサイトの修正、更新でハマりがちな「キャッシュ」

HTMLやJavaScript、CSSを確かに 修正・更新したはずなのに、 webサイトに内容が反映されない。 そんな現象にでくわしたらキャッシュを 疑いましょう。 キャッシュを知らない新人webデザイナーがハマっている ケースを何度か見てきました。 新人でなくても、w…

リセットCSSの種類をざっくりおさらい。リセットCSSはどれを使うか問題。

リセットCSSについての すばらしい良記事がありました。 becolomochi.hatenablog.com 昨今、リセットCSSにもいろいろ種類があります。 記事で紹介されているCSSは以下の4つ。 Eric Meyer’s “Reset CSS” 2.0Normalize.cssress.csssanitize.css それぞれざっく…

いまさら感満載だけど、ガラケーサイトの表示確認に。FireMobileSimulator

いまだにまだ残るガラケーサイト。 受託でweb製作やっていると、 ガラケーサイトを捨てないクライアントも多いです。 特にキャリアの公式サイトを運営している場合は、 捨てる理由があまりないので、そのまま継続という パタンが多いのかなと思います。 下火…

船頭が二人になると船が沈む。ディレクションはひとりの人間のみがするべき

webデザイナー、UIデザイナーは デザインレビューやデザインの方針、 デザインの修正指示・フィードバックを 日々受けてこなしていると思いますが、 異なる2名から別々に指示を受けること、 ありませんか? これはけっこうあるあるだと思うのですが、 デザイ…

【メモ】winmail.datという添付ファイルはGmailに転送したら見れるよ

今日クライアントからの メールで「winmail.dat」という添付ファイルを 受け取りました。 これたまーにあるんですよね。 いつもは再送お願いしたりしていたのですが、 そもそもこれなんなのというので調べてみると、 winmail.datという添付ファイルを受け取…

スパムメールの標的になる「info@〜」のような推測されやすいメールアドレスの利用は避けよう

受託のweb製作でのあるあるなのですが、 サイトのお問い合わせやユーザとの やりとりをするメールアドレスを 「info@toaru.jp」のようにしている、 もしくはしようとしているクライアントは 多いです。 ですが、info@はやめたほうがよいですよ、と 助言する…

リニューアル前どんなだったっけ?過去のwebサイトを閲覧できるサービス Wayback Machine

webデザイナーあるある、 webサイトの過去のデザインみたいとき。 そんなときは Wayback Machine で確認しましょう。 Wayback Machine は、インターネットアーカイブ(Internet Archive)が保存しているウェブサイトを閲覧できるサービスです。 URLを入力し…

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

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