とあるweb屋の仕事術

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

開発・実装

記事の中身や概要がわかるOGP画像がいい!記事の要約をOGP画像に全部いれてしまおう

OGPだけで記事の中身や概要がわかるのって いいですよね。 アイキャッチやOGP画像は、 サイト運営する上でかなり重要な要素ですが、 まじめに作成するとなると結構な手間と労力を 必要とするので、いちいち作成していられない という方も多いと思います。 ク…

メルカリPCサイトに学ぶ。複数行のテキストを省略して末尾...の3点リーダーに代わるホワイトアウト省略方法

一覧表示のUIでよくある、 テキスト省略のTipsです。 CSSでは、指定した領域をはみ出したときに、 テキストを三点リーダー「...」で省略する プロパティがありますよね。 developer.mozilla.org ただこちら、1行のテキストにしか対応できません。 複数行でい…

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

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

固有名詞は辞書ツールで単語登録すべし。細かい所まで気を配る&入力間違いもナシで効率化、一石二鳥。

先日こんなツイートを見かけました。 そう言えば、文書やメッセージのやり取り時に固有名詞を適切に表現してる人は、仕事において細かい所まで気を配れる人という評価をするんだけど、この判断方法結構当たる例・macbook pro -> MacBook Pro・airpods -> Air…

スマホのディスプレイ、画面サイズ、解像度の種類の多さの説明に役立つ記事

モバイルファーストやレスポンシブデザインが 当たり前になってきている最近のWebサイト。 スマホ端末がどのくらい世の中にあるのか、 わかりやすい記事をご紹介します。 少し古いですがまずはこちら gigazine.net 可視化されているのでわかりやすいですね。…

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ページへのPDF埋め込みの要望は意外に多い Webサイト、Webページで 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サイトではちゃんとやっている。 そんなツ…

【良記事ピックアップ】タブUIの考察・最適解

デザイナーなら読んでおきたい 良記事ピックアップシリーズ。 Web屋の現場では、日々の情報収集が スキルに直結していく場面も多い。 普段からいかにアンテナを張って、 引き出しを増やしておくかが スキルアップへの近道であーる! というわけで、さっそく…

1画面内に自動で動く要素を2箇所以上いれないようにデザイン設計をしよう

リッチなUIが多くなってきた昨今の Webサイト。 ブラウザでの表現も豊かになり、 情報の見せ方が多様になってきています。 見栄えがいいからと言って、 なんでもかんでもリッチにすれば いいというわけではないので 基本、1画面内に動く要素が2つ以上ある …

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

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

まだtableで消耗してるの?スマホサイト、レスポンシブサイトでのtableのUIどうする問題

スマホサイトやレスポンシブの Webサイトで厄介なのが 表組み(table)です。 表が2列3列程度であれば 問題ありませんが、列が多いtableや、 セルの項目のテキスト量が多いtable組みの ような横に長いレイアウトは 幅の制約があるスマホサイトや レスポン…

管理画面にWYSIWYG(ウィジウィグ)を採用してしんどかった話

WebサイトやWebシステム、 Webサービスには 管理画面と公開画面があります。 WordPressにもありますよね。 僕の勤めている会社では 受託でWeb製作しているのですが、 いわゆるCMSは、 独自開発したCMSを使っています。 クライアントごとにオーダーメイドに …

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

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

アドビからコーディングやプログラミング用途に最適化されたフォントがまたリリース。Source Han Mono(源ノ等幅)

先日、プログラミングやコーディングに おすすめなフォントを紹介しましたが、続報です。 www.toaru.jp 先日アドビがまた新たにフォントを リリースしました。 「Source Han Mono(源ノ等幅)」です。 https://forest.watch.impress.co.jp/docs/news/1186980…

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

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

レスポンシブWebデザインのブレイクポイントの設定2019年度版

レスポンシブWebデザインでの ブレイクポイントの設定の目安に なるのがマテリアルデザインの ブレイクポイントの数値です。 Responsive layout grid - Material Design マテリアルデザインのブレイクポイントシステム ブレイクポイントは細かく設定しすぎる…

クライアントワークで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あたりもよく使われるファイルだと思います。 これら…