とあるweb屋の仕事術

とあるweb屋の仕事術

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

開発・実装

【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/…

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-x:scroll で横スクロールはさせたいけどスクロールバーを出したくない場合の対処法

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