とあるweb屋の仕事術

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

開発・実装

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

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

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

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

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

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

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

Webサイト、WebページでPDFを掲載したいとクライアントから要望をもらうことがよくあります。よくある要望としては以下のようなかんじ。 PDFをページの中にインラインで表示したい。 PDFをサムネイルのように表示したい。 PDFを記事内に埋め込みたい。 PDFを…

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

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

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

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

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

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

装飾とあしらいがうまい!記事の見出しタイトルとアイキャッチ画像のデザイン・処理が秀逸なサイト

記事タイトル、見出しの 装飾、あしらいがうまいサイトを 発見したのでメモ&ご紹介。 tokyofreelance.jp スマホサイトより PCサイトのデザインがいいですね。 スクショ貼ります。 記事タイトル、アイキャッチの処理が秀逸です アイキャッチを背景にひいて、…

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

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

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

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

モーダルウィンドウ実装の決定版。実装が超簡単、カスタマイズ性も高いモーダルウィンドウjQueryプラグイン「Modaal」

いまやほとんどのWebサイトやアプリで 導入されているUI「モーダルウィンドウ」 今回は超簡単に実装できてカスタマイズ性も高い、 jQueryプラグイン「Modaal」を紹介します。 最近では jQueryオワコンだなどという声も ありますが、適材適所。 jQueryはなん…

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

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

スマホの実機がないときに動作確認する方法まとめ。おすすめスマホシミュレーター

Webサイトの実装では、 実機でしか発生しない不具合や 実機で動作の検証を必要とする場面も多いです。 確認作業はなかなか骨の折れる作業です。 各デバイス、OSのバージョンを考えると、 実機がない場合もあります。 そんなときに役立つのがシミューレーター…

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

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

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

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

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

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

tableコーディングするのめんどくさい。ジェネレーターでサクッとHTML化してしまおう

tableのコーディング・実装に役立つツール のご紹介。 tableのコーディングは面倒なので、 ジェネレーターでサクッと HTML化してしまいましょう。 表のレイアウトをwebサイトに 掲載する際にtableをコーディング する場面はそこそこ多いです。 簡単な表をtab…

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

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

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

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

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

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

webサイトにIEでアクセスしてきたユーザには別のブラウザを推奨しよう

いまだにはびこるIEユーザ。 webサイトの進化をさまたげる害悪ブラウザは、 使わないようにユーザに別のブラウザを案内しましょう。 ie-buster.qranoko.jp IE Busterは上記のとおり、ユーザにChromeを 促すJSです。導入はめちゃくちゃ簡単。 HTML内にCDNのJS…

スマホサイトの推奨環境・動作保証端末はOSのシェア率で決める。OSのシェアがひと目で分かる「スマタブinfo」

スマホサイト実装・製作の際に、 どのOSを推奨しどの端末を動作保証するかは OSのシェア率を見て決めましょう。 動作保証範囲はサイト製作のはじめにクライアントと しっかり定義していないと、クライアントが 持っている古い一部の端末で表示がおかしいだと…

フォームのmethod属性、GETとPOSTの違い

フォームの実装で form タグを使用しますが、 その際に method という属性があります。 <FORM>-HTMLタグリファレンス <form action="/inquiry/" name="hoge" method="post"> <input type="text" name="example"> <input type="submit" value="送信"></form> とか <form action="/inquiry/" name="hoge" method="get"> <input type="text" name="example"> </form></form>

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

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

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

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

黒丸●になるパスワードを可視化するべきかの考察。フォーム最適化(EFO)

ログインや新規登録でのパスワード入力。 日常でさまざまなwebサービス、サイト、アプリを 利用しているユーザにとっては一番よく使うフォーム ではないでしょうか。 といってもログインが保持されていれば初回の入力 以降はめったに入力する機会がないかも…

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

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

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

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

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

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

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

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