とあるweb屋の仕事術

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

知識・経験

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Bingのクローラーからの大量アクセスによりサイトがダウンしかけた話

日々、世界中のWebサイトの情報を収集する クローラー。 僕の勤めている会社では 大手のクライアントのwebサイトのサーバ保守も やっているのですが、数年前にこのクローラーが 大量にアクセスしてくることでサーバに負荷が かかり、サイトがダウンしかけた…

簡単なお問い合わせやアンケートに便利。webサイトのフォームにはGoogleフォームを活用しよう

当ブログにはそういえば お問い合わせページがなかったのですが、 先ほどGoogleフォームで作成しました。 www.google.com はてなブログでは お問い合わせフォームを作成する 機能がないようで、調べてみると Googleフォームを利用している方が 多かったので…

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

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

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

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

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

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

検索能力は問題解決能力。web製作の現場では調べる力、検索能力のスキルも重要。

組織やチームでweb製作するメリットのひとつ として、知識量と経験値があります。 課題や問題にぶち当たったときに、 自分ひとりの知識や経験だけでなく チーム内の全員の知識と経験がプラスされるので、 解決が早かったり、自分ひとりではたどり着けない ア…

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

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

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

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

空港サイトのリニューアル提案のときに考えたこと。言語が違っても認識できるピクトグラムの話

受託で某空港のwebサイトの保守業務を やっていたことがあり、デザインの フルリニューアルの話があがった際に 提案をだしたことがあります。 そのときに考えていたことや提案した内容の一部、 当時デザイナチームで話していたこと。 空港のWebサイトなので…

ローマ字のヘボン式と訓令式の違いとファイル名やクラス名の命名規則の参考サイトまとめ

web製作にたずさわっているひとであれば ローマ字、よく使いますよね。 ローマ字にはヘボン式と訓令式という 方式があるのはご存知でしょうか。 先日自分はどっちも使ってるなぁと思ったので、 どういう違いなのか改めて整理と、 ついでにファイル名やID、cl…

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

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

1アカウントのGmailで複数アドレスを使う!WebサイトやWebサービスの検証に便利なGmailの「エイリアス」

ログインや会員登録などが必要な Webサイト、Webサービスを開発実装する際に 複数のメールアドレスを使用して動作の確認など をすることがあります。 その際に便利なのがGmailのエイリアス。 特に何の設定もせずに、ひとつのGmail アカウントで複数のメール…

Webサイトでの特殊文字や記号は実体参照でHTMLに記述しよう

実体参照とは、 ある文字を別の書き方で書き表す方法です。 uhyohyo.sakura.tv 文字化けするような環境依存文字や特殊文字などを 表記する際に用いられる方法で、 HTMLコーディングする際には知っておきたい知識です。 よく使われるものとしては以下のような…

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

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

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

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

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

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

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

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

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

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

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

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

パスワード自動発行のシステム実装ではわかりにくい文字列を排除する

会員登録するときに、ログインIDとパスワードを設定するwebサービスは多いと思います。メールアドレスをログインIDとしたり、パスワードは自分で決めたものにするのか、自動発行するパタンもあると思います。 自動発行する場合に、ユーザごとにランダムの英…

運用負担が激減。WebサイトやWebサービスは「よくある質問」を充実させろ

受託でWeb制作10年以上やってます。 そうするといろんなWebサイト、Webサービスの 立ち上げや運用に携わります。 BtoBのものもあれば、 BtoCのものもいろいろ経験してきました。 今回は主にBtoCのWeb運用の話。 そのWebサイト/Webサービスのユーザ層にも よ…