とあるweb屋の仕事術

とあるweb屋の仕事術

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

開発・実装

『記事タイトルと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/…

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

デザイナ目線でピックアップ、 IT業界・Web界隈の気になる記事まとめ、 2019年5月19日号です。 note.mu jp.techcrunch.com note.mu hbol.jp www.itmedia.co.jp speakerdeck.com goworkship.com coliss.com speakerdeck.com ------- 以上です。 こんなかんじ…

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

デザイナ目線でピックアップ、 IT業界・Web界隈の気になる記事まとめ、 2019年5月18日号です。 気になるニュース・動向 楽天がライブ動画に参入「Rakuten LIVE」 誰でも配信OK、コマース機能も - ITmedia NEWS 意匠法改正が変えるWebサイトリリース・リニュ…

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

デザイナ目線でピックアップ、 IT業界・Web界隈の気になる記事まとめ、 2019年5月16日号です。 目立った動きはとくになし、 それではまとめ、どうぞ。 ics.media qiita.com note.mu weba11y.jp book.mynavi.jp careerhack.en-japan.com note.mu coliss.com w…

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

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

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

デザイナ目線でピックアップ、 IT業界・Web界隈の気になる記事まとめ、 2019年5月14日号です。 ボリュームなかなかです。 いろいろ動きがありました! チェックしておきましょう! 気になる動向・ニュース 「CS6以降のアプリがいつでもすべて使える」という…

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

デザイナ目線でピックアップ、 IT業界・Web界隈の気になる記事まとめ、 2019年5月13日号です。 気になる動向・ニュース フェイスブックが「f」ロゴを刷新 「グーグルマップ」で稼ぐ、検索に続く収益源に スシロー、「Ok Google」で来店予約可能に “旬”の技術…

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

デザイナ目線でピックアップ、 IT業界・Web界隈の気になる記事まとめ、 2019年5月10日号です。 気になる動向・ニュース ヤフー、アフィリエイトサイトによる広告出稿を原則NGに それでは良記事のまとめ、どうぞー。 https://0-9.tumblr.com/post/18477079229…

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

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

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

デザイナ目線でピックアップ、 IT業界・Web界隈の気になる記事まとめ、 2019年5月8日号です。 気になる動向・ニュース セブン&アイHDがレジ袋全廃へ 紙袋などに変更、2030年目標 GoogleがiFrameに代わる遷移タグPortalsをデモ、サイト間の連携を大幅強化へ …

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

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

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

デザイナ目線でピックアップ、 IT業界・Web界隈の気になる記事まとめ、 日曜日の2019年5月5日号です。 それでは学びの多い良記事まとめです。どうぞー。 www.negireon.com www.fnn.jp グーグル検索結果にファビコンが表示されるようになったのね!これはいい…

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

デザイナ目線でピックアップ、 IT業界・Web界隈の気になる記事まとめ、 土曜日の2019年5月4日号です。 気になる動向・ニュース YouTubeがオリジナル作品を広告入りで無料に | TechCrunch Japan 「Firefox」でインストール済みアドオンが利用不能になる問題 …

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

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

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

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

日本語も見やすくてコーディング、プログラミングに最適化されたフォント「Source Han Code JP」がオススメ

コーディング、マークアップ、プログラミングをする際の エディタソフトではどのようなフォントを使用していますか? 僕は「Source Han Code JP」を使用しています。 Source Han Code JPとは 日本語表示も考慮されたコーディング向けのフォント「Source Han …

HTML/CSSの文法チェック、バリデーションツールはこれ使っとけばいいよ2選

HTMLとCSSの文法チェック、 バリデーションツールのご紹介。 最近だとエディタにアドオンやパッケージ、 プラグインなどでバリデーション機能が ついていたりするので、コーディング・開発実装時に チェックすることもできますが、やはり 「最終型としてのソ…