とあるweb屋の仕事術

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

技術・ノウハウ

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

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

デザイナーがUI設計/デザインする上で持っておきたい大切な3つの視点・意識

デザインをする上では、 重要な3つの視点があります。 ユーザ視点 クライアント視点 開発者視点 この3つはデザイナーに必要な視点であり 常にもっておきたい「意識」です。 デザインを設計する上で一番大切なのは、 やはり「ユーザ視点」です。 ユーザにと…

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

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

クライアントワークでFAQのリッチリザルトを実装してみた。実装にあたってノウハウをご紹介

さて、先日こんな記事を書いたのですが、 www.toaru.jp さっそくクライアントに提案したところ、 発注いただけて、実装することになりました。 実装にあたっては、 デベロッパーサイトにある仕様のとおりなのですが、 https://developers.google.com/search/…

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

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

全国展開のWebサイトにおける地域の分け方(エリア、都道府県の区分)

全国規模での コンテンツを取り扱う Webサイトでは必ず地域での セグメントがあります。 コンテンツの検索や、 ぐるなびや食べログ、 不動産のWebサイトのように 入口が地域で分かれていたりします。 ユーザ視点ではあまり意識することは ないかもしれません…

ヒアリング能力は質問力。質問力、大事。ディレクションやコミュケーションでの質問力の重要性。

質問力、だいじ。 web業界では「質問力」が とても重要なスキルです。 さまざまな場面で必要になるからです。 この業界の門戸をたたくときから必要です。 就職・転職時の面接での質問タイム 組織・チーム内での同僚、先輩や上司とのコミュニケーション クラ…

技術のトレンドをいつキャッチアップするか。アーリーアダプターが強い。

web製作業界の技術のトレンド。 フロントエンド界隈、バックエンド界隈ともに 日々、めまぐるしく状況が変化しています。 技術のトレンドを追うにも情報量も多く なかなか追いつかなかったりします。 どれがモダンでトレンドなのか、 自分はどれを取捨選択し…

常時SSLのwebサイトではブラウザの警告がでないように注意しよう。src、href、contentで参照するファイルのパスに要注意。

昨今のwebサイトは 常時SSL化の動きが進んでいます。 GoogleがSSLを推奨しているからです。 常時SSLとは? 常時SSL(Always On SSL)は、ウェブサイト内のログインページやフォームなど特定のページだけでなく、その他すべてのページをSSL化することです。常…

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

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

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

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

会員登録率アップの魔法のことば。「会員登録は30秒で完了します」は優れた会員登録へのアプローチ

webサイトやwebサービスで ユーザに疎まれる機能のひとつに会員登録機能があります。 本当にめんどくさい。 コンテンツを利用しようとしたときに出てくるログイン画面と会員登録への導線。 ユーザの皆さん、うざいと思ったことあると思います。 「面倒だから…

ファイル名をキーワードで区切る場合に使用するのはハイフンではなくアンダーバーがいい理由

webサイトの実装で取り扱うファイルは 多岐に渡りますが、主なものとしては HTML、CSS、画像(jpg/png/svg/gif)、JavaScript、PHPあたりでしょうか。 資料作成など含めるとPDFやWord、Excel、PowerPointあたりもよく使われるファイルだと思います。 これら…

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

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

会員登録フォームでメールアドレスを2回入力させるのどうなの問題。導入したらクレームの問い合わせが減った例

会員登録フォームでたまーにある メールアドレス間違え防止のためのフォーム、 ありますよね。 「確認用に再度メールアドレスをご入力ください」 というやつです。 メールアドレスを入力したすぐその下にあるやつですが、 これ意味なくない?というのが僕の…

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

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

多言語サイトでの言語切り替え実装方法。PHPでブラウザの言語情報を判定して切り替える

多言語で展開するサイトでは、 デフォルトはアクセスしたユーザの言語で 表示したい。 日本語対応している海外のwebサイトに アクセスしたら英語だったら切り替えるの面倒ですよね。 できれば自分のわかる言語ページがあるなら最初から その言語で表示してほ…

多言語サイトの言語切り替えのUIの考察

先日、受託案件で 多言語サイトの案件があったのですが、 そのときに少し考えた話。 多言語展開のwebサイトでは 言語の切り替え機能があります。 言語の切り替え機能は、 主に以下のUIパターンが考えられます。 プルダウンでの言語選択式 ヘッダ、フッタなど…

絶対に役に立つ。Webデザイナーが知ってるとはかどるPHP「URLを判定して分岐」

絶対に役に立つWebデザイナーが 知ってるとはかどるPHPシリーズ。 本日は「URLを判定して分岐」です。 これは知っているとなかなか捗るんですよね。 WordPressだとトップページだけ表示するというのは すでに用意されている書き方がありますよね。 ここにト…

絶対に役に立つ。Webデザイナーが知ってるとはかどるPHP「include」

絶対に役に立つ、Webデザイナーが知ってると はかどるPHPシリーズ。 本日は別のファイルを読み込むのに捗るPHPです。 Webサイトの開発・実装では ソースコードの視認性が重要です。 視認性がよければ作業スピードも早くなり みんなしあわせになれる。 PHPのi…

全国規模・全国展開のWebサイトのエリア検索のデフォルト値はよく利用される地域か現在地にする

全国規模、全国展開のコンテンツを取り扱う Webサイト/Webサービスではエリア検索や 地域ごとの情報に出し分けて表示しています。 取り扱うコンテンツの特性にもよりますが、 基本は利用者が多い地域をメインにもって くるとよいです。 どこかの地域に特化…

検索ワード打ち違いのユーザへのアプローチはSUUMOサイトを見習いたい

メガネのJINSに続いて、 参考にしたいSEOのちょっとしたTipsです。 SUUMO(スーモ)Webサイトは検索機能なども とても参考になる不動産のポータルサイトですが、 SEOでちょっとおもしろいことをやっています。 なるほどなぁと感心したのでご紹介。 SUUMO(ス…

メガネのJINSのサイトのSEO。キーワードの盛り込み方が秀逸なので参考にしたい

先日たまたまメガネのJINSのサイトを見ていて、 SEOうまいなぁと思ったので、ご紹介。 メガネのJINSですが、 ユーザの検索ワードはやっぱり「メガネ」ですよね。 メガネは「めがね」や「眼鏡」で検索するユーザも多いはず。 どうしてるんだろうなーとメガネ…

絶対に役に立つ。Webデザイナーが使えるとはかどるPHP「文字数制御」

Webデザイナーでも PHPをさわる機会はそこそこあります。 なじみがあるのはWordPressでしょうかね。 僕の勤めている会社では、 自社のCMSを独自に開発しているのでPHPを さわる機会も多く、自分で触れたほうが 開発がスムーズだったりします。 ここでいう「…

これ指定しときゃOK!洗練されたデザインになるグレースケール系のカラーまとめ(ボーダー/テキスト/背景)

Webサイトのデザインをしていて なんか野暮ったいな、 なにか締まりがないなと感じたことありませんか? 余白やコンテンツの配置、レイアウト... さまざまな要因が組み合わさってデザインは洗練されていくもの。 Webサイトのデザイン要素の中で ボーダーカラ…

メルマガ運用するならメルマガ開封率とクリック経路をGoogleアナリティクスで計測しよう

先日紹介したHTMLメルマガ作成の記事に付随して、 www.toaru.jp メルマガ開封率や、 メルマガ経由でアクセスされたかどうかを 集計する方法も調べたので、 参考になったサイトをご紹介します。 受託でWebサイトの保守をしていると、 ちゃんと集計や開封率、…

うわっ...Webサイト、四角すぎ...?ハッとするデザインを盛り込もう

Webサイトって四角いですよね。 まぁそんなこというと ほとんどのものは四角いのですが。 Webサイトはしょせんはグリッドで レイアウトされているので、 とにかく四角い。 そんな四角いWebサイト、Webデザイン ではありますが、ハッとするデザインって ある…

webサイトの不具合を素早く解決するコツ

webサイトは生モノで、 生き物のように日々変化しています。 動的なwebサイトでは毎日コンテンツが 更新されますし、デバイスやOS、ブラウザ などwebサイトを取り巻く環境まわりの環境も 変わっていきます。 そのためwebサイトは、問題や課題、改善点 が常に…

楽天市場のネットショップのHTMLがtableタグ、tableレイアウトの理由

楽天市場のネットショップは、 数々の企業が出店しています。 出店申し込みからなんやかんやして RMSという店舗運営システムを利用して ネットショップを構築していきます。 www.rakuten.co.jp 通常の楽天RMSでは レイアウトなどにいろいろと 制限があり、あ…

HTMLメルマガ作成はこれだけ見ておけばOK!参考になる記事まとめ

先日HTMLメルマガを実装する機会が あったので、作成の参考にした良記事を まとめておきたいと思います。 検索するといろいろなメルマガテンプレートが ありますが、各種メールソフトで確認すると、 実用に耐えうるレベルじゃないものが多いなという 印象を…