コラム33：Webディレクターがよく使う便利ツール5選 | オンラインコミュニティ「集まれ！Webディレクターの森」
こんにちは！Webディレクター1年目のつちだです。 突然ですが、皆さんはWeb制作のお仕事をする上で、「これが無いと仕事にならん！」というツールはありますか？ 私はFigmaなどのデザインツールやChat GPTなどのAIツールはもちろんのこと、「ツールサイト」や「Google拡張機能」などもよく使っていて、「これが無くなったら困る！」と思うことが多々あります。 そんなわけで、今日は『Webディレクターがよく使う便利ツール』を5個紹介します！ つちだ 【つちだのプロフィール】 業界未経験で去年の5月にWebディレクターへ転職。 アニメ・ゲーム系のWebサイト制作会社に勤めています。 XやYoutubeで、新しいツールやガジェットのレビューを見るのが地味に好き。 Alt & Meta viewer https://chromewebstore.google.com/detail/jjcjbl
サイト上のさまざまなページのパフォーマンスをまとめて測定できるツール「Unlighthouse」
「Lighthouse」はGoogleが作成したページの読み込み速度やアクセシビリティなどをまとめてチェック・採点してくれるツールですが、そのLighthouseをサイト上のさまざまなページで動作させることでサイト全体のスコアを一発で算出してくれるツールが「Unlighthouse」です。 Unlighthouse - Site-wide Google Lighthouse · Unlighthouse https://unlighthouse.dev/ Unlighthouseを利用するためにはNode.jsのインストールが必要です。下記のURLから、手元の環境に合ったインストール方法を選択してください。 パッケージマネージャを利用した Node.js のインストール | Node.js https://nodejs.org/ja/download/package-manager 今回は
Notionを便利にするサービス16選 - Notionがあなたのチームを強くする(13)
この連載では、Notionであらゆるものを作れるとご紹介してきました。Notion単体でも非常に強力なツールなのですが、実は他のツールやサービスと組み合わせることによってさらに実現できる世界が広がります。 今回は、Notionを便利にするサービスをご紹介します。 1. リッチなWebサイトを作れる「Wraptas」 リッチなWebサイトを作れる「Wraptas」 Wraptas https://wraptas.com/ Notionの標準機能としてもWebに公開することはできますが、Wraptasを利用するとさらにカスタマイズできるようになります。 独自ドメインを利用できる JavaScript, CSSを設定できる SEO向けの設定ができる 例えばBLAM社の採用サイトやSHIBUYA SLOW STREAMのサービスサイトはWraptasによって作られています。一見するとNotionで
URLに2文字加えてGitHub上のWebページやコードをVSCode風のUIで表示する・「github1s」
github1sはURLに2文字加えてGitHub上のWebページやコードをVSCode風のUIで表示するWebアプリです。 https://github.com/conwnet/github1s例えば上のようなURLを https://github1s.com/conwnet/github1sというように、github.comをgithub1s.comとするだけでVSCode風のUIでGithubを閲覧できるようになる、というもの。昔別の用途ですが似たようなものがありましたね。Youtubeをなんか便利にする、みたいなのだった気がする。 各ブラウザのエクステンションも用意されていますが、前述のようにGithubのドメインに1sを加えるだけなので無くても良さそうですね。 勿論ツリーもコードもVSCodeライクになりますのでユーザーの方なら見やすくなるかもしれませんね。こちらのアプリはOSS
JSで想定外に画面遷移するとき、消えてしまうログを残してデバッグする（ひとり DevTools Advent Calendar 2020 – 20日目） | Ginpen.com
20 日目の記事です。 DevToolsおれおれAdvent Calendar 2020やります。ひとりで。 ログ類は画面や DevTools を再読み込みすると全部消えちゃいます。普通はそれでいいけど、画面移動直前の様子を知りたい場合には不便です。 そんなときは Preserve log をオンしておくと記録が残るようになります。Console パネルと Network パネルで利用できます。 コンソールのログを残す Console パネルを開く Console パネル右上のコンソールの設定ボタンを押し、設定欄を開く “Preserve log” のチェックを入れる これで、例えば beforeunload イベントとか pagehide イベントとか、そういうイベントでの処理のログも残るようになります。 const eventLogger = (event) => console.lo
CSSじゃなくて実際にレンダリングで使われるフォントの調べ方（ひとり DevTools Advent Calendar 2020 – 11日目） | Ginpen.com
11 日目の記事です。 DevToolsおれおれAdvent Calendar 2020やります。ひとりで。 CSS の font-family はフォント名を複数指定して、このフォントがなかったら次、みたいにすることができます。また serif のような、環境に依存する緩い指定である総称フォントファミリー (generic font family) もあります。 CSS で何のフォントが指定されているかは Elements パネルのスタイル欄に出ていますが、最終的にどのフォントが利用されているのかというのも、実はパネル内で見つけることができます。 たくさん並んでるけど結局今見えてるのどれ？ 指定したやつちゃんと利いてる？ フォールバックになってない？ みたいなときに。 利用されているフォント名を探す Elements パネル → Computed を開く 一番下 Rendered Fon
Chromeの新機能CSS Overviewがすごく便利！ページに使用しているCSSの概要や未使用の宣言がすぐ分かる
Chromeに新しく実装された「CSS Overview」が非常に便利なので、紹介します。 表示しているページのCSSの概要、カラー、フォント、メディアクエリ、未使用の宣言が一覧でき、制作したページの検証やスタイルガイドとしても役立ちます。 Chromeの新機能「CSS Overview」 Fyi: New in Chrome: CSS Overview Chromeの新機能「CSS Overview」の準備 Chromeの新機能「CSS Overview」の使い方 Chromeの新機能「CSS Overview」の準備 まずは、Chrome デベロッパーツールを開き、右上の歯車アイコン（Settings）をクリックします。
無料＆超簡単にパスワード付きのURLを作成できるオープンソースなウェブサービス「Link Lock」レビュー
DropboxやGoogle Driveといったクラウドストレージにアップロードしたデータを共有する場合など、URLを誰かに伝えることは日常的な行いです。無料で公開されているオープンソースサービス「Link Lock」を使うと、簡単にURLにパスワードをかけることができます。 Link Lock - Password-protect links https://jstrieb.github.io/link-lock/create/ GitHub - jstrieb/link-lock: Distributed application to password-protect URLs using AES in the browser https://github.com/jstrieb/link-lock さっそくウェブサイトにアクセスすると、URLやパスワードを入力する画面が表示されます。
面倒くさがりな私がMacでよく利用している業務効率化アプリ5選 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
彼のこの記事を読んで、使い始めました。 タスク管理ツールって、過去いろいろと使っているんですけど、なかなかしっくり来るものがないんですよね。結果的に、Googleカレンダーにタスクを登録したり、メモ帳にToDoを記載したり……。 ただ、このRemember The Milkを使うと、なんかテンションが上がって抜け漏れなくタスク管理ができる。いやいや、絶対褒めすぎでしょって思ってたんですけど、いや、便利っすね。これはマジで。 詳細はここでは説明しません。もう、まさくにの記事を読んでください。 私は、無料プランを使っているんですけど、たしかにこれは有料プランを契約しても良いレベル。 Transmit https://panic.com/jp/transmit/ 続いて、FTP/SFTPクライアントのTransmitです。 今までは、Forkliftを使っていたんですけど、ここ一年くらいでこのソ
monolith - Webページをアーカイブ
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました 過去に見たWebサイトにアクセスしてみたら、すでにコンテンツが消されていた…なんて経験は誰しもがあるはずです。あの時アーカイブしておけば…と後悔してもすでに遅く、思い立った時に行っておかないといけません。 そこで使ってみたいのがmonolithです。 monolithの使い方 アーカイブした例です。表示は崩れていません。 画像はdata URIを使っています。 monolithはターミナルでURLを指定して実行すれば、その内容をアーカイブしてくれます。画像やJavaScript、CSSは一つのHTML中に収めてくれます。iframeなどはダメなようですが、見たままに保存しておくとしては十分ではないでしょうか。 monolithはRust製のオープンソース・ソフトウェア（Public
無料でウェブページ、写真、ファイルなどをオンライン上で管理して他人と共有できるウェブアプリ「Pearltrees」を使ってみた
自分が興味のあるウェブページ、インターネット上の写真や、ローカルのファイル、PDF形式の文書など、さまざまなコンテンツを「アイコン」の形で1つのページにまとめて保存できるのが「Pearltrees」です。自分だけのコレクションが作って他人と共有できるウェブアプリとのことなので、実際に使ってみました。 Pearltrees https://www.pearltrees.com/ まずは上記のURLから公式ページにアクセスして、アカウントを作成します。Twitterアカウント・Facebookアカウント・Googleアカウントでもログインが可能ですが、今回はアカウントを作成することにします。アカウント名・メールアドレス・パスワードを入力して、「join」をクリック。 アカウントのプランを「Public」(無料)、「Personal」(月間2.99ドル・約331円)、「Advanced」(月間4
HEY META - Website Meta Tag Check
Why your website should have meta tags? Your website visitors are visual beings (with the exception of robots). When they see the awesome content, product, video, or all of the other cool things they discover on there, they will share it. Now how great would it be if that wasn’t just a plain link in the message, post, comment or tweet but a quick preview of your awesome stuff? Meta tags enable sea
ウェブページにコメントやハイライトを付けて他人と共有できる「Hypothesis」を実際に使ってみた
ウェブサイトの文章を読んでいると、分からなかったことや疑問に思ったことをメモしたり、誰かに聞いてみたりしたいと思うことがあります。そんな時にウェブページ上の任意のテキストに対し、自由に「ウェブ・アノテーション」を付与＆閲覧ができる「Hypothesis」を実際に使ってみました。 Hypothesis – The Internet, peer reviewed. https://web.hypothes.is/ 本来「アノテーション（Annotation）」とは英語で「注記、注釈」という意味を持ちますが、ここでのアノテーションとは注釈だけにとどまらず、ハイライトやタグ付けなどの情報も含む広い意味を持ちます。テキストや動画、画像などのデジタルコンテンツに、作者や管理者以外もアノテーションをつけられるようにする枠組を「オープン・アノテーション」と呼び、この枠組をインターネット上に応用し、ウェブサ
Webページの表示が早くなる！既存ページのクリティカル レンダリング パスを最適化するオンラインツール
スタイルシートを外部ファイルで管理されている人が多いと思います。しかし、最近では上部のコンテンツを表示するためのスタイルシートをインラインで記述し、残りは後にロードさせ、ページの表示を早くしているサイトが増えてきました。 Googleなどでも積極的に採用されているテクニックです。 既存ページのクリティカル レンダリング パスを改善するためのスタイルシートを簡単に生成できるオンラインツールを紹介します。 ※秒数は目安です クリティカル レンダリング パス(Critical Rendering Path)とは、ブラウザがページを表示する際にサーバーからHTMLのレスポンスを受け取ると、スクリーンにピクセルが描画されるまでに多くのステップが必要になり、この時にブラウザがページの最初のペイントを実行するために必要とするシーケンスのことです。 クリティカル レンダリング パスについて詳しくは、下記を
こんなツールがあったのか！Webページが世界各地でどのように見えるか、位置情報を使ったコンテンツも確認できる -Geo Screenshot
Webページが世界各地のブラウザでどのように見えているか、位置情報を使ったコンテンツのローカライズ、コンテンツが国によってフィルタで妨げられていないかなどを確認できる無料オンラインツールを紹介します。 対応都市の一覧 ワールドワイド ローケーション 世界各地65ヵ所以上のデータセンターに対応。 結果はすぐに サーバーのクラスタはキューを使わずに、直ちにスクリーンショットを生成。 Webkitエンジン レンダリングには、WebFonts/CSS3をサポートしたWebkitエンジンを使用。 マルチデバイス 多数の異なる解像度のデバイスをサポート。 ローカライズ HTTPヘッダーに含まれる言語指定、多言語フォントのサポート。 API スクリーンショットを処理するバッチのAPIを提供。 単に世界各地でどのように見えるかだけでなく、Geo Location（位置情報）を使ったサイトの確認にも役立ちま
モックアップを画像をアップロードするだけで制作してくれる「Smartmockups」
WEBデザインを生業として行う上で、単純にデザインしたものを見せるだけでは無く、時には実際にスマートフォンやPCに表示されている画像を見せてイメージを膨らませていただく作業をしたということもあると思います。今日紹介するのはそんなモックアップを画像をアップロードするだけで制作してくれる「Smartmockups」です。 デスクトップからスマートフォン、タブレットなど様々なモック写真が公開されており、それらを簡単に利用することが可能です。 試しにDesigndevelopのスクリーンショットで試してみましたので以下からご覧ください。 詳しくは以下 アップロード後に写真範囲が選択でき、生成後はサイズを指定してダウンロードすることができます。手慣れた人であればモックアップ制作もほんのすこしの手間ですが、画像を探して合成してというのは熟練者でも時間がないときには面倒なもの。 プレゼンテーションや制作
スマホ向けサイトのアドレスを入力するだけで100点満点中何点かを表示するGoogleの「Mobile Website Speed Testing Tool」公開
スマートフォンやタブレットなどモバイル端末の普及に伴い、モバイル端末でウェブサイトを閲覧するユーザーの割合が増加していることを受けて、Googleがウェブサイト制作者向けに「ウェブサイトがどのくらいモバイルフレンドリーか」を測定できるサービス「Mobile Website Speed Testing Tool」を公開しています。 Mobile Website Speed Testing Tool - Google https://testmysite.thinkwithgoogle.com/ Mobile Website Speed Testing Toolは、Googleの既存のサービス「PageSpeed Insights」を使い、スコアをより分かりやすく表示したもの。ウェブサイトを分析するには、URLを入力して「TEST NOW」をクリックするだけです。今回はYahoo! JAPAN
ウェブページの重さを計測して高速化に向けたアドバイスをくれる「imgix Page Weight Tool」
ウェブサイト上に画像をアップロードする際、複数サイズの画像を用意したりファイルフォーマットを変換したりすることで、少しでもファイルサイズを小さくしてサーバーに負荷がかからないようにしますが、こういった地味な作業は取り扱う画像の数が多くなれば多くなるほど面倒になっていくものです。そんな画像加工関連の処理を自動かつリアルタイムで行ってくれるサービスが「imgix」で、ウェブページを表示する際に重要な「ページの重さ」を計測してくれるサービス「imgix Page Weight Tool」を提供しているので実際に計測してみました。 imgix Page Weight Tool • Learn how to improve your site or app’s speed. https://pageweight.imgix.com/ 「imgix Page Weight Tool」の使用方法はとても
スクリーンショットにコメントをつけてシェアできるツール
2017年11月23日 便利ツール Webサイトに修正指示を出す時、どんなツールで、どのようにシェアしていますか？該当ページのスクリーンショットを撮影し、その画像に指示を入れていく…という方が多いかな、と思います。今回はWebサイトの制作者のみならず、制作者に指示をだす人や、クライアント側も使える、修正指示がグンと楽になりそうなツールをいくつか紹介します！ ↑私が10年以上利用している会計ソフト！ AUN[あうん] AUN[あうん]はふせん紙の感覚でWebサイトや画像にコメントを残し、共有できるツールです。登録不要！無料で気軽に利用できるところが魅力的。対象となるWebサイトのURLを入力するだけでスクリーンショットを撮影でき、指示やコメントを残していけますよ。さっそく試してみましょう。 サイトからURLを入力し、読み込みが終わると、画面をトリミングするかどうかの選択画面が表示されます。読
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
URLを入力すると、そのWebページの全体スクリーンショットを撮ってくれる・「Fullpagescreencapture.com」
