男性的女性的子どもっぽいレトロアンティークオールドモダン伝統的渋い和風丸いカクカクカジュアルフォーマル存在感インパクト繊細美しい上品高貴元気陽気明るい親しみすっきりかわいらしいクールポップやさしいなごやかシンプルおしゃれホラーアニメゲーム個性的面白いくせある

2023年も終わりに近づき、この1年間に収集したツールを振り返りながら、Web制作に役立つお気に入りを見つけてみましょう。 素晴らしい新ツールや素材がたくさんリリースされ、選定にはたっぷり時間がかかりましたが、カテゴリ別に幅広くセレクションできました。 本当に役立つかどうかだけを考え、「これ、神ツール。」と思えるものをピックアップ。 話題の的だったAIをうまく活用すれば、ワークフローを格段にスピードアップさせ、面倒な作業もストレスなくこなすことができます。 この記事では、そんなあなたの役に立つ2023年公開のWebデザイン制作ツールや素材をまとめてご紹介します。 整理したカテゴリは以下の通り。

24/2/1 更新 動画も対応しているようです。同じコマンドで動作することを確認しました。 カメラの写真を整理していたら日時が撮影日よりかなり昔(2年前とか)になっている画像がありました。 このままだと撮影順に並べた時に整合性が合わないので修正することにしました。 原因はおそらくカメラを長いこと電源を入れなかったので時間の設定などがリセットされていたのかも知れません。 色々試してみましたが、ExifToolというCUIのコマンドで変更するのが上手くいきました。 AppleStoreにあるツールを試してみましたが無料のものはどれも上手くいかず、有料のものはこのためだけに課金するのは躊躇われました。 Macの「写真」というアプリは撮影日の変更はアプリ内だけで有効なようでしたので、GUIが良かったのですがCUIでやることにしました。 結果はもちろん問題なく変更できました。 インストール方法は公式

Technology部のJoshです。 今回は画像生成AI「Stable Diffusion（ステイブル・ディフュージョン）」で、実際に画像を作る手順をていねいに解説します。はじめて使ってみる方の参考になれば幸いです。 ※画像認識AIの開発・導入を検討中の方はおすすめの画像認識AI開発会社まとめもご覧ください。 概要 Stable Diffusionとは 「Stable Diffusion」とは、入力されたテキスト（プロンプト）から高品質な画像を生成するAIモデルです。人物や動物、風景など、さまざまな画像を生成できます。また、リアルで創造的な画像を生成する能力でも知られています。 Stable Diffusionは、「ランダムな画像にノイズを加えて、徐々にプロンプトに一致させていく」という拡散プロセスをもとにしています。画像がプロンプトとどの程度一致するかを評価し、一致しない場合はノイズを

「プロのカメラマンが撮影したような、人物の写真が欲しい」 「モデル写真が欲しいけど、費用がかかるので迷っている」 「撮影するには時間もかかるし、場所やモデルの確保はどうしよう」 たとえば、カメラマンに撮影場所へ来てもらって撮影する「出張撮影」。 撮影時間によって料金は変わりますが、相場は撮影1時間で２万円～３万円程度と言われています。 さらに写真のレタッチや編集などのオプション、撮影枚数が多いと数十万円の費用が必要ということも。 しかし、今回紹介するオンラインAIツールを利用すれば、誰でも簡単に人物写真を生成できます。 しかも、無料です。 超リアルな人物の全身写真を作成できるAI Human Generator AI Human Generatorは、ほんの数クリックするだけで、超リアルな人物の全身写真をリアルタイムで作成できるオンラインAIツールです。 このツールがすごいところがずばり、

テキストを入力すると、Webサイトやスマホアプリ向けの美しいカラーパレットをすぐに生成してくれるAIツールを紹介します。 「企業サイト向けのクールで信頼感のあるカラーで、ベースはホワイト」「子供向けキャンペーンサイト、海と夏のイメージ」こんな感じにテキストを入力すると、Webサイトやスマホアプリ向けのカラーパレットを生成してくれます。 AI Colors AI Colorsの特徴 AI Colorsの使い方 AI Colorsを使ってみた AI Colorsの特徴 AI ColorsはOpenAIのGPT-3.5を使用して、テキストからAIによりWebサイトやスマホアプリ向けの美しいカラーパレットを生成します。また、他の人が作成したカラーパレットを検索・編集・視覚化することもできます。 利用にあたっては無料で、登録なども必要ありません。

フォントのサイズをレスポンシブ対応にする際、最近よく使用されている実装方法がclamp()関数を使用した流体タイポグラフィです。CSSのclamp()関数を使用すると、ビューポートをベースにしてフォントサイズの最小値と最大値を定義してその間の値を流動的にすることができ、デバイスのスクリーンサイズが増えた現在に欠かせないテクニックです。 たとえば、小さいスクリーンでは最小値の16px、スクリーンが大きくなるにつれ、最大値の24pxになるまで少しずつ大きくなる、という感じです。メディアクエリは一切不要なので、たった一行で全サイズを設定できます。 CSSのclamp()関数を使用して、レスポンシブ対応のフォントサイズを超簡単に定義できるツールを紹介します。 clamp() Calculator clamp() Calculatorの特徴 clamp() Calculatorの使い方 clamp(

あなたが、いま実装しようとしているレイアウトは、おそらくCSSで実現できるでしょう。 ただし日常の業務をこなしながら、日々進化するCSSの最新テクニックを習得するとなれば、話はまったく別です。 仕事で使えるCSSの技術を、時間をかけて学ぶよりも、ボタンやドラッグ＆ドロップ操作で、思い通りのレイアウトを自動で生成できる「ジェネレーター（英: Generator）」を活用してみましょう。 新しいプロジェクトにコピー＆ペーストで利用でき、瞬時に思い通りのレイアウトを作成、はじめてのひとにもオススメの時短ツールを厳選しています。 コピペ一発！便利なCSSレイアウトジェネレーターおすすめ12選（Grid ＆ Flexbox編） ここでは、CSS Grid と Flexbox で表現できるレイアウト用ジェネレーターと便利なリソースを一緒にまとめてご紹介します。 Layoutit! grid-templ

見栄えの良い4色または5色を組み合わせる配色ツールはいろいろありますが、WebサイトやスマホアプリのUIデザインだとうまく機能しないことがあります。 カラーブランディングに成功しているWebサイトを見ると、そんなに数多くの色は使用されていません。デザインの一貫性を保つには、プライマリーカラーを1つ、アクセントカラーを1つ、あとはニュートラルトーンのベースカラーを使用しています。 この3つのカラーに9つの色合いを組み合わせたカラーパレットを生成する配色ツールを紹介します。 Goodpalette GoodpaletteはUIデザインに特化されたオンラインの配色ツールで、無料で使用できます。登録など面倒なことは一切不要。 使い方は簡単で、上部の「Generate」ボタンをクリックするだけです。生成した配色は、WebサイトやSlackやダッシュボードでどんな感じになるか確認できます。

鮮やかなグラデーションを作成したいのに、なぜか色の移り変わる部分がくすんで灰色っぽくなってしまう……という経験をした人もいるはず。このような事態を避けて色鮮やかなグラデーションを作成可能にするツール「CSS Gradient Generator」が公開されています。CSS Gradient Generatorで作成したグラデーションはCSSのlinear-gradient関数としてコピー＆ペースト可能なので、そのままウェブデザインとしても利用可能です。 CSS Gradient Generator https://www.joshwcomeau.com/gradient-generator/ Make Beautiful Gradients in CSS, with linear-gradient, radial-gradient, or conic-gradient. https://w

サイト改善の神ツール！？無料で使えるユーザー行動分析ツール「QA Heatmap Analytics」がスゴかった件 みなさんこんにちは、外部メディアコンテンツ制作チームでリーダーをしているやぎです。普段はさまざまなオウンドメディアの記事制作代行や運用支援をしています。 突然ですが、私と同じオウンメディアのコンテンツ制作に関わっている方は重々承知かと思いますが…… 記事は「作って終わり」じゃないんです！！！ メディアを成長させるうえでは、作った後がもっとも重要といっても過言ではありません！ ただ作って終わりではなく、コンテンツ設計にあたり決めたKPIに対する進捗はどうなのか、といった効果測定を日々実施し、PDCAサイクルを構築していくことが重要であり、もっというと”C”の「Check（評価）」 、つまり記事の「分析」 を怠ると、メディアの成長はできません！ さぁみなさん、今すぐに自社のオウ

Sort a list of numbers or strings alphabetically or by length

この記事では、日々進化を続けるWeb制作で役立つ、便利な最新オンラインツールをまとめてご紹介しています。 これまではむずかしいと思っていたことや、面倒な作業をボタン一発で完了できるなど、デザイン制作の時間短縮にぴったりなツールから、遠隔でのテレワークにも便利な新機能、ユニークなツールやサービスなどが揃います。 カテゴリごとに整理しているので、目的にあったお気に入りツールを探してみましょう。 コンテンツ目次 1. Web制作便利ツール 2. 配色ツール 3. デザインコレクション 4. イラスト系ライブラリ 5. プロトタイプツール 6. アイコンツール 7. コラボ、リモートワークツール 8. 面白、クリエイティブツール Web制作の効率、生産性アップ！話題の最新オンラインツールまとめ Web制作便利ツール Tail Blend CSSmix-blend-modeプロパティをリアルタイムで

EmbedSocial エンベッドソーシャルとは、Instagram, Facebook, Twitter, Google Reviewの 写真・動画・レビューなどを簡単にWEBサイトに組み込むことができる、SaaS型のウィジェット作成ツールです。全世界で50,000人以上の ユーザーが1,000,000以上のウィジェットを作成し（2019年7月現在）活用しております。 2020年はInstagram APIの変更やTwitterによるInternet Explorerサポート終了も発表されましたが、EmbedSocialではこれらの変更に全て対応し、今まで同様に各ソーシャルメディアから投稿を収集し、WEBサイトに埋め込んで表示させることができます。 目次 SNS投稿埋め込みツール EmbedSocialとは？ 新Instagram API対応・Internet ExplorerでのTwi

もっと楽にコンテンツSEOを進めたい！そんな夢のような話……あった。SEOツール「SEARCH WRITE」を紹介します みなさんこんにちは、LIGのマーケターのまこりーぬ（@makosaito214）です。 LIGにはマーケティング担当者が私しかおらず、広告もSEOもウェビナーもメルマガもWeb担も幅広くなんでも担当しています。ありがたいことに忙しくなくはない毎日を過ごしています。 そんな私がいま頭を抱えているのは「コンテンツSEO」。コンバージョン獲得に大きく寄与する施策なのでめちゃめちゃしっかり取り組みたいところなんですが、どうにもこうにも腰が重くて……。正直なところなかなか手を付けられていません。 コンテンツSEOはなぜ億劫なのか？ ちょっと言語化してみましょう。一連の流れに私の心の声を添えてみました。 要するに、地味な作業が多いし終わりが見えない。 あああ誰か私の代わりにリライト

こんにちは、LIGのエディターののぞみーるです。 私は普段、お客様のメディア運用やサイト内のコンテンツ制作を担当しており、面白系だったりインタビュー系だったり様々な企画を作っていますが、SEO施策のご依頼も多くいただきます！ 突然ですがSEOに携わるみなさん、 SEO作業って時間がかかりませんか？ 何百記事書いても目標のアクセス数に届かなかったり、SEOの項目に気をつけてリライトしてるのになかなか順位が上がらなかったり、なんてことよくありませんか？ SEO施策って事前調査にめっちゃ時間がかかるわりに、正しい分析ができていないとなかなか成果には結びついてくれません。SEO嫌いになりそう……と苦手意識を持っている方も多いのでは。 他にもこんな課題があるのではないでしょうか？ SEOコンテンツ制作担当者の課題あるある SEOに関して社内にしっかりとしたノウハウがない 知識量や編集力が属人的で、成

レスポンシブの確認ツールやサービスをいろいろ紹介してきましたが、ついに本命とも言える無料ツールの登場です！ Windows, macOS, Linux対応で、しかもオープンソース、快適にレスポンシブの確認ができるResponsively Appを紹介します。5つのデバイスを同時にすれば、制作時間は5倍速くなります。 無料とは思えないほど高性能で、すべてのWeb制作者にお勧めです！ Responsively App Responsively App -GitHub Responsively Appの特徴 Responsively Appのダウンロード Responsively Appの使い方 Responsively Appの特徴 Responsively Appは、レスポンシブのWeb制作に役立つElectronで構築されたブラウザです。 ユーザーインタラクションは、すべてのデバイス間でミ

SVGアイコンの管理ができ、編集もできる便利な無料ツールを紹介します。 Windows, macOS, Linux対応で、たくさんのSVGアイコンを一元管理できてしまう優れものです。 Norde -SVG Icon manager and editor Nordeの特徴 Nordeのダウンロード・インストール Nordeの使い方 Nordeの特徴 NordeはUIデザイナーもアイコン制作者も、アイコンを扱うすべての人のために構築された無料ツールです。複数のマシンでもアイコンを一元管理できるので、チームで使用するのにも適しています。 Nordeの特徴 SVGアイコンの管理 SVGアイコンをアイコンセット、グループを使用して管理できます。 SVGアイコンの編集 SVGアイコンのカラーやサイズを簡単に編集できます。 SVGアイコンのエクスポート .svg, .png, .jpg, .webp,