とあるweb屋の仕事術

とあるweb屋の仕事術

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

ブックマーク/リンク

【時短ツール】favicon(ファビコン)やWebクリップアイコン、PC・モバイル各種アイコンジェネレーターで一発作成

Webサイト製作時には 設定が欠かせないアイコン類。 favicon(ファビコン)やWebクリップアイコン作成も Webデザイナーのタスクのひとつです。 まじめに一つ一つ作成すると結構な数になるため 各種のアイコン類を作成するのは 面倒ですし、手間も工数も意外…

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

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

iOS端末の解像度、画面サイズ俯瞰のメモ

毎年新しいデバイスが登場して 画面サイズや解像度を俯瞰したいなーと 思ったときの、役に立つブックマークのメモ。 いちばんわかりやすいのがここかな。 qiita.com www.paintcodeapp.com iPhone/iPad/Apple Watch解像度(画面サイズ)早見表 - Qiita よりキャ…

PCの画面上ならなんでも測れる定規・ルーラーアプリがめちゃくちゃ便利。px幅をサクッと確認

Mac限定になりますが便利なアプリをご紹介。 web製作をしていると、幅や高さを知りたいという 場面がよくあります。 レイアウトやバナー、アイコンのサイズ、 余白などなど。 他のwebサイト見ていてサクッとサイズ感を 確認したい。そんなときに便利なアプリ…

有名どころのブランドカラー、ガイドライン、リンクカラーの参考サイトまとめ

SNS、webサービスの有名どころの カラーをまとめているwebサイトのメモ。 配色のアイデアに、デザイン時のカラーピックアップに。 guidelinecolour.com www.ukar.jp weboook.blog22.fc2.com そのほか、 意外に悩ましいリンクカラーについて。 大手のwebサイ…

配色に困ったときのアイデアとヒントにしたいカラーパレットツール・サイト

配色に困ったら参考にしたいカラーパレットサイトを紹介します。 Color Hex カラーコードを入力すると、RGB値やCMYK値の各種数値や、カラースキーム(同系色のバリーションや、補色、四色配色、三色配色、分裂捕食など)、各種の色展開を確認することができ…

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

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

Googleフォントを探すのに超絶便利。俯瞰性の高さがハンパないFontCDN

Google Fontsのwebサイトってフォント探すのだるいですよね。 絞り込み検索の機能とか充実しているのはいいのだけど、 一覧性、俯瞰性としてはあまりよくないUIになっています。 見づらいな、使いづらいなと思っていたら、 Googleフォントを一覧でざーっと表…

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

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

サクッとテキスト、ソースコードの差分チェックができるwebサービス「デュフフ」

webサイトの保守、更新作業、 データの移行や確認で、 修正前、修正後の差分を確認したい、 そんな場面はweb製作屋であれば 日常茶飯事です。 サクッと簡単にチェックできるwebサービス を紹介します。 テキスト比較ツール difff《デュフフ》です。 difff.jp ブ…

webサービス立ち上げに、webサイトの企画・提案に。公開されているAPIは要チェック!

先日、楽天のAPIを使ってwebサービスを たちあげたという記事をみて qiita.com APIってどんなものがあるのだろうと 思ってググったら、すばらしいまとめがありました。 matome.naver.jp こんなにもたくさんのAPIがあるとは...。 受託案件でももちろん使えま…

【Twitter/Facebook/Instagram】の各SNSウィジェット生成、URLのまとめ

TwitterやFacebook、Instagramは webサイトでウィジェットとして タイムラインを表示してあるサイト よくありますよね。 お知らせのようにCMSのかわりとして フェイスブックのタイムラインを表示 させたり、 デザインのにぎやかしやライブ感を出す ために In…

リニューアル前どんなだったっけ?過去のwebサイトを閲覧できるサービス Wayback Machine

webデザイナーあるある、 webサイトの過去のデザインみたいとき。 そんなときは Wayback Machine で確認しましょう。 Wayback Machine は、インターネットアーカイブ(Internet Archive)が保存しているウェブサイトを閲覧できるサービスです。 URLを入力し…

Twitter、Facebookでシェアした画像を変更したい。そんなときはOGPキャッシュを削除しよう

TwitterやFacebookで記事をシェアすると、 記事のアイキャッチやメイン画像が OGP画像として表示されます。 シェアしたあとに画像を 変更したいことありますよね。 クライアントがシェアしたwebページに 「間違いがあって差し替えたいのだけど...」 「画像変…

クレジットカードのブランドロゴは公式サイトからダウンロードして使おう

受託のweb制作では ECサイトやぐるなびや食べログのような 店舗紹介ポータルサイトや、 飲食店のwebサイトのように 取り扱いクレジットカードを表記する場面は そこそこあります。 クレジットカード会社名を表記する際に、 各社のブランドロゴを掲載したほう…