とあるweb屋の仕事術

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

ツール・Webサービス

有料Webサービスでの同時ログイン制御をどうするか。サブスクリプションサービスの同時視聴、同時再生、同時使用のパターンまとめ

先日クライアントワークで 月額の有料のWebサービスの案件をリリース しまして、そのときにアカウントの 使い回しについて考察する機会があったので、 有名なサブスクリプション系のWebサービスは どうなってるかなというところをざっくり 調べてみたので、…

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

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

デザイン案を印刷するときの用紙サイズは A3 がおすすめ!企画提案・プレゼンの印象を少しでもよくしよう

Web製作のフローで デザイン案をクライアントに 提案・プレゼンするフローは 必ずあります。 最近だとプロトタイプを作って 実際にブラウザ動かし画面上で 提案し、クライアントに見て もらうことも多いと思いますが、 プロトタイプと合わせて、紙で 印刷し…

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

WebページへのPDF埋め込みの要望は意外に多い Webサイト、Webページで PDFを掲載したいと クライアントから要望を もらうことがよくあります。 PDFをインラインで表示したい PDFをサムネイルのように表示したい PDFを埋め込みたい 別ページに飛ばしたくない…

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

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

LP(ランディングページ)制作費用40万は高いのか?相場はいくらか?Web製作の現場のリアルな話。

LP(ランディングページ)の 制作費用に関してこんなツイートが。 LP制作費が40万〜と答えると「たかっ!」っていう人多いです。確かに1ページとして考えるとめちゃくちゃ高いかもしれませんが、目標を達成するための必要な情報を凝縮させる1ページを作るの…

スマホサイトに記載されている電話番号は「<a href="tel:電話番号">」で電話発信用リンクにするべきか

スマホサイトにある 電話番号はリンクにすべきか問題。 店舗を取り扱っているWebサイト であればお店の電話番号が掲載されているし、 会社サイトであれば 会社概要に電話番号が掲載されています。 ECサイト、ネットショップであれば、 特定商取引法に基づく…

クックパッドのプレミアムサービスのお試し利用に学ぶ、Webサイトやサービスを継続的に利用してもらう方法「ゲーミフィケーション」

WebサイトやWebサービスは 継続利用してもらってなんぼ、 ということで 継続的に利用してもらうにはどうすればいいか、 という点において少しヒントになるような良記事を紹介します。 shumaiblog.com ↑こちらの記事では少し古いですが クックパッドが有料で…

今、話題になっている各地域のTwitter(ツイッター)のトレンドがまる分かり!Twittrend(ついっトレンド)

リアルタイムでなうでヤングな 情報鮮度がまるっとひと目でわかるWebサービスを ご紹介。Twittrend(ついっトレンド)です。 Twitterで話題になっている、 トレンドワードを日本国内の各都道府県から 海外の主要国まで網羅しており、トレンドが ひと目でわか…

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

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

紙面ビューアーに使える。canvasの描画処理が簡単にできるJSパッケージ「JimmyJS」

新聞や雑誌など 紙媒体のメディアを webサイトに転用したいとか 画像を公開したいけど 大人の事情で見せたくない部分がある とかそういったときに使えそうなJSパッケージを ご紹介します。 デモをみるのが早いのでまずはデモから。 https://demo-laravel52.c…

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

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

ランディングページにコストかけるかどうか問題。まじめにやると1サイト制作分のコストかかりまっせ

企業のイベントやキャンペーンなどの ランディングページなんて 無料ホームページ作成ツールで つくればいいじゃん。 と思っている、n太郎です。 お客さんからよく イベントやキャンペーンなどをやるから それに合わせて既存サイトのデザイン枠 の中ではなく…

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

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

受け身でいい!「ながら」学習できる動画学習がおすすめ。オンライン動画学習サービスのUdemy(ユーデミー)

先日、オンライン動画学習サービスのUdemyの コースを購入してみました。 Udemyは、動画学習のプラットフォームで webサービスです。 さまざまな動画がオンラインコースの講座として 提供されています。 www.udemy.com 一度オンラインコースを購入してしまえ…

超軽量。ライティング・文章執筆作業にはMac OS専用テキストエディタ CotEditor がおすすめ

僕はコーディング用のエディタと ライティングや文章執筆時のエディタを 分けて使用しています。 コーディング用のエディタは Codaを使用しています。 https://panic.com/jp/coda/ それとは別にテキストエディタ として CotEditor を使用しています。 macOS…

Bingのクローラーからの大量アクセスによりサイトがダウンしかけた話

日々、世界中のWebサイトの情報を収集する クローラー。 僕の勤めている会社では 大手のクライアントのwebサイトのサーバ保守も やっているのですが、数年前にこのクローラーが 大量にアクセスしてくることでサーバに負荷が かかり、サイトがダウンしかけた…

簡単なお問い合わせやアンケートに便利。webサイトのフォームにはGoogleフォームを活用しよう

当ブログにはそういえば お問い合わせページがなかったのですが、 先ほどGoogleフォームで作成しました。 www.google.com はてなブログでは お問い合わせフォームを作成する 機能がないようで、調べてみると Googleフォームを利用している方が 多かったので…

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

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

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

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

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

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

Slackの新着・未読をわかりやすく表示。サイドバーのチャンネルリストにバッジをつける方法。

Slackのサイドバーの新着・未読っていまいちわかりにくいし、 見づらいと思いませんか? 僕は長年Skypeを使用してSkypeに慣れすぎてたせいか、 いまいちSlackの未読表示が慣れなくて困っていたのですが、 未読がわかりやすくなる方法を見つけたのでご紹介し…

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

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

仮想でドメインとIPアドレスを紐づけてなんちゃってDNS。Macのhosts編集に便利なアプリ「Hosts」

hostsファイルとは、 ざっくりいうと、ドメインとIPを紐付けて ローカルでなんちゃってDNSのような設定ができるファイルのことです。 このドメインはこのサーバですよ、という割り当てができます。 https://wa3.i-3-i.info/word11760.htmlDNSサーバなファイ…

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

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

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

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

効率的に情報収集できる、webデザイナー/UIデザイナーの僕がおすすめするフォローしておくべきTwitterアカウント

webデザイナー/UIデザイナーであれば デザインのトレンドやwebのトレンド、 動向は日々情報収集してインプットしておきたいところ。 webデザイナー志望の方や若手の方に多いのですが、 「どうやって情報収集したらいいのかわからない」 「どうやって情報収…

プロジェクト管理ツールはもういらない!サクッとプロジェクト管理できるGoogleスプレッドシートがおすすめ

みなさんプロジェクト管理ツール、 使っていますか。 今日は僕の勤めている会社ではどのように プロジェクトを管理して進めているか 紹介します。 いろいろ便利なプロジェクト管理ツールが ありますが、使用しているのは、 管理に使用しているのは、 Google…

OGP画像(og:image)の表示確認に便利!OGP画像シミュレータ

SNS戦国時代のいまでは webサイト、webページでの OGPタグの設定は欠かせません。 今回はそのOGPタグのひとつ、 OGP画像の作成に便利なサービスを紹介します。 SNSでどのように表示されるかは 実際にTwitter、Facebook、LINEなどに 投稿して確認しますよね。…

デザインの引き出しの多さが差をつける!デザインスクラップはイラレのアートボードにベタベタ貼り付ける方法がおすすめ

アイデアのひらめきや、 デザインの引き出しを増やすには 普段からクオリティの高いデザインに ふれて目を肥やしておくことが大切です。 ただ見ておわるのではなく、 いつでもそのアイデアや引き出しをひきだせる ようにしておきたい。 いいデザインは反復し…