画像生成AIでウェブサイトやUIデザインを生成するコツ
人工知能（AI）は、ウェブサイト制作を、根本から変えてしまうでしょう。 今のところ、AI画像生成ツールは、呪文（プロンプト）を唱える、ちょっとしたコツを覚えることで、以下のようなWebレイアウトを作成できます。 beautiful landing for spiderman website, design, ux/ui, ux, ui --ar 3:2 --v 4 --q 2 「花屋、フラワーショップ」をテーマにすると、一発でWebサイト向けレイアウトを錬成できます。 「日本」をテーマにすると、こんな美しいUIデザインに。 実際にAI画像生成ツールを使いこむうちに、少しずつわかってきた、AIツールでウェブサイトやUIデザイン画像を生成するコツを、メモ的にご紹介。 アップデート、継続していきます。 コンテンツ目次 ✨ AI画像生成ツールとは？ ✨ 唱える呪文（プロンプト）って何？ ✨ 画像を
「Web2.0」って何だったの？ 「Web3」との違いは？ ネットに詳しいけんすう氏に聞いてみた
「Web2.0」って何だったの？ 「Web3」との違いは？ ネットに詳しいけんすう氏に聞いてみた（1/4 ページ） 「Web3」（Web3.0）という言葉をよく目にするようになりました。Web3は、Web2.0の“次”という意味で名付けられた、インターネットの新しい概念とされています。 そもそも、Web2.0とは何だったのでしょうか。15年ほど前に提唱され、当時は大きな話題を集めましたが、若いネットユーザーにはなじみがない人も多いかもしれません。 そこで、Web2.0ブームのころからネットの最前線にいた起業家の「けんすう」こと古川健介さんと、当時からネットの現場を取材していた私、岡田有花（通称：ゆかたん）が、Web2.0を振り返りながら、Web3への展望について語り合いました。 けんすう（古川健介） 1981年生まれ。2000年に学生掲示板「ミルクカフェ」を立ち上げて以来、ネットコミュニテ
Webフォント読み込み戦略（2021年） - MOL
Preload web fonts 前回、といっても2年前だが、display=swapとはなにかで、Google Fontsを読み込むときはURLパラメータに display=swap をつけるといいよと言った。というわけで、それ以降、『目標をセンターに入れて、display=swap…』と盲目的に考えるようになってた。 おさらいとして display=swap では、まず代替フォントを表示し、Webフォントをダウンロードしたら、随時スワップするという挙動になる。この場合、代替フォントからWebフォントへ切り替わる FOUT (flash of unstyled text) が起こってしまう。こんな感じ↓ 出典：font-face descriptor playground まぁ何も表示されないよりかは良いかと思うわけだが、時は流れ、最近ではWebの指標として、Web Vitalsという
【必見】2020年に話題になったイケてるWebサービス・アプリまとめ
あけましておめでとうございます。 今回は、2020年に話題になったイケてるWebサービス・アプリを紹介します。 多数リリースされているもののなかから、チェックし直しておいたほうがよさそうなサービスをピックアップしました。 2020年は新型コロナウイルスの流行もあり、世界が大きく変わりました。 それに伴い、生活様式にも変化が生まれ、リリースされるWebサービスやアプリも時代に則したものが多いように感じました。 冬休みのあいだに、ぜひおさらいしてみてください。 【その前に】毎月更新する本シリーズについて 2020年はしばらくお休みをいただいておりましたが、本年より更新を再開します。 引き続き、毎月末に更新となります。 また、新たに無料メルマガも開始します。 メルマガでは、運営者が気になったり、業界的に知っておいたほうが良さそうなWebサービスやアプリの紹介を不定期に紹介していく予定です。 最新
Web制作の時短に！2020年の便利オンラインツール・ベスト100選
この記事では、2020年に公開された便利なWebオンラインツール・ベスト100個をまとめてご紹介します。 定期的にリストアップしている最新オンラインツールまとめ記事では、2020年にかけて合計306個の新しいツールやサービスが登場しました。 その中でも、特にWebデザイン制作に便利なツールを選りすぐったコレクションで、「無料で利用できるツール」を揃えています。 これらのツールやサービスを活用すれば、Webデザイン制作をより快適に進めることができるでしょう。 カテゴリごとに整理しているので、目的にあったお気に入りツールを探してみましょう。 コンテンツ目次 1. CSSツール（14個） 2. パターンツール（7個） 3. イラスト系ツール（3個） 4. デザインツール（10個） 5. 配色カラーツール（6個） 6. グラデーションツール（3個） 7. SVGツール（8個） 8. スクリーンショ
CSSを最適化してページの読み込み時間を高速化する方法
CSSを最適化して、ページの読み込み時間を高速化する方法を紹介します。 シンプルなCSSのファイルをはじめ、大規模プロジェクトで使用されるCSSまで、すべてのCSSに効果があるテクニックです。 Optimizing CSS for faster page loads by Tomas Pustelnik 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに 読み込みに時間がかかるのはなぜか？ スタイルシートのファイルサイズを制限する クリティカルCSSを使用する 遅延読み込みのスタイルシート スタイルシートにコード分割を使用する まとめ はじめに 先日、私は自分のWebサイトの読み込み時間を改善することにしました。すでにかなり高速にロードされていましたが、まだ改善の余地があり、CSSの読み込みがその原因の1つであることが分か
CSS 最近のWebページやアプリのレイアウトに適した、ラッパーの実装テクニックを徹底解説
最近のWebページやアプリに適した、ラッパーの実装テクニックを紹介します。 ラッパーとはコンテンツを読みやすい幅に包むもので、CSSでのラッパーの実装、マージンやパディングの追加、中央揃え、ラッパーのバリエーション、FlexboxやCSS Gridとの組み合わせ方など、レイアウトの実装テクニックが満載です。 Styling Layout Wrappers In CSS by Ahmad Shadeed はじめに ラッパーとは ページにラッパーが必要な理由 CSSでのラッパーの実装 ラッパーのdisplayのタイプ ラッパー間のマージンの追加 全画面セクション内のラッパー ヒーローセクションにラッパーが必要ですか？ ラッパーを中央揃えにするか、左揃えにするか ラッパーのバリエーションに対するCSS変数の使用 display: contents;を使用する 流動的な背景に固定コンテンツを配置
Web制作の常識が変わる、便利な最新オンラインツール48個まとめ
この記事では、Webデザインやグラフィックデザインの制作スピードを短縮し、生産性をアップする、便利な最新オンラインツールをまとめてご紹介します。 「もっと早く知りたかった」と思わせる、面倒な作業をサクサクこなす時短ツールが勢揃いです。カテゴリごとに整理しているので、目的にあったお気に入りツールを探してみましょう。 コンテンツ目次 1. Web制作便利ツール 2. デザインコレクション 3. イラスト系ライブラリ 4. 配色ツール 5. プロトタイプツール 6. コラボ、リモートワークツール 7. 面白、クリエイティブツール Web制作の常識が変わる、便利な最新オンラインツールまとめ Web制作便利ツール The Hero Generator ウェブサイトの魅力的なヒーローイメージを作成できるオンラインツール。グラデーションオーバーレイやボタンスタイル、見出しタイトルの余白など細かい部分も手
画像による Layout Shift が無くなる Web がやって来る - mizdra's blog
はじめに Web では古来より <img> タグを用いて画像を読み込んでいました. しかし <img> タグにはアスペクト比に関する情報を埋め込むための属性が用意されていません. そのため, ブラウザが画像をネットワークから fetch して読み込みが完了するまで, レスポンシブな img 要素の寸法を決定できず, ページにガタツキ (Layout Shift) が生じる問題がありました. この問題を解決するため以前より, アスペクト比を埋め込むための新たな属性の導入が提案されていました. しかし最近議論に動きがあり, 既存の属性を利用する方法が提案され, ブラウザに実装され始めています. ここでは問題の背景, 提案と議論の変遷, そして開発者が取るべき対応について紹介します. はじめに img タグと Layout Shift intrinsicsize 属性 intrinsicsize
普段使ってる便利なWebサービス教えて
有料無料、有名無名問わず。 ブコメで見かけたRAINDROP.ioを知らなかったのがきっかけなんだけど 自分のネット環境が相当古くさくなってるようで、なんとか更新したい ミーハで恥ずかしいけど自分が普段使ってるものを何個か上げる 情報収集ははてぶとRSSリーダー、情報の整理はScrapbox、文章はDropbox Paper（NotionやOneNoteは合わなかった） 音楽はYoutubeとSpotify、暇つぶしははてブ、Discordのチャット、Podcast 追記：出先なのであまり反応できない、たくさんありがとう、帰ったら読ませてもらいます 追追記：1000とかまじか。練に練ったうんこネタはぜんぜん反応ないのに…素朴に思ったことを書くのって大切だね 多すぎて試していくだけで半日かかりそうだ、とにかくありがとう、トラバもありがとう id:pptppc2 RSSリーダーはTiny Ti
第１回 ＣＤＮ の 仕組み （CDNはどんな技術で何が出来るのか） | REDBOX Labo
今回は、何故ＣＤＮを使う必要があるのか、ＣＤＮ の 仕組み や技術的なことをなるべく分かりやすく解説したいと思います。 ＷＥＢ高速化、負荷分散、オンデマンド・ライブ動画配信、コンテンツ配信、ということを検討もしくはこれから始めようとしている方は、ＣＤＮというキーワードを一度ぐらいは聞いたことがあると思います。CDNってどんな仕組みでどのようなことが出来るかご存じですか？ まずはCDNの簡単な歴史から。 ＣＤＮの歴史ＣＤＮ（コンテンツデリバリーネットワーク）というのは、大手Ａｋａｍａｉさんが１９９０年代に提唱したといわれているコンテンツを配信するためのネットワークのことです。実は、最近できた技術や仕組みではありません。 インターネットが流行りだした時代からありました。 しかし、近年では90年代当初から比べると様々な仕組みや技術が取り入れられた次世代CDNに進化しています。 ＣＤＮとは？CDN
コロナショックはウェブ制作をどう変えるか？【ウェビナーレポート】 | knowledge / baigie
4月22日に開催された合同ウェビナー『コロナショックはウェブ制作をどう変えるか？』に、株式会社アンティー・ファクトリー代表の中川直樹さん、株式会社タービン・インタラクティブ代表取締役の志水哲也さん、株式会社リクト代表の山口裕介さん、そして当社代表・枌谷がパネリストとして出演しました。 コロナが事業に与える影響、新しい働き方についてどう考えるべきか、これからの顧客獲得のやり方、web制作には何が求められるのか。 web制作の未来について、web制作会社4社の代表が語り合ったウェビナーの内容をお届けします。 ※当日いただいた質疑応答への回答はこちらです。 事業への影響 志水：今、約680名もの方々にお集まりいただいていますが、一番気になるのはコロナが自社の事業に与える影響ですよね。そこで、Zoomウェビナーのアンケート機能を活用して、コロナの影響に関するアンケートを行ってみたいと思います。お集
「h1タグが複数だとSEOで不利になる？」実際にABテストで検証 | Moz - SEOとインバウンドマーケティングの実践情報
監査やSEOツールで目にしたこれらの推奨事項は、常に議論の的になった。次のような会話が交わされるのだ。 CNNはバカだな、ページ見出しに h2 を使っているよ。使う要素が間違ってる！ 確かにそうだけど、でも今のままで害はある？ 実を言うとわからないんだ 次第にSEO担当者はこうした考え方を捨て去るようになり、 h1 要素は1つだけ使うという厳格な概念は、「ページの冒頭付近に大きなテキストを置く」という考え方に落ちついていった。 グーグルの進化とミューラー氏による公式見解では……グーグルも進化している。たとえば、次のようにだ： コンテンツの分析能力が向上した ページ内の各要素がどう絡み合っているかをより深く理解できるようになった。 そもそも、世の中のWebページには、HTMLマークアップのミスが存在しているものだ。その事実を考えると、使われているタグが h1 であろうと h2 であろうと d
生活と意見: ソーシャルディスタンスなどと称してユーザー名や文章にスペースを挟む行為についての苦情
covid19-twitter-research_01.md 生活と意見: ソーシャルディスタンスなどと称してユーザー名や文章にスペースを挟む行為についての苦情 更新履歴 2020-05-13 追記 継続して観測していて、対応が行われたアカウントの記録などを残している https://twitter.com/bulkneets/status/1259419102851903490 FAQとして「機械が人間の都合に合わせろ」に対する反論を取り急ぎ置いておく 走り書きで書いた https://twitter.com/bulkneets/status/1260524434256879617 https://twitter.com/voqn/status/1259515760986095617 記事下部に、フィードバックなどを追記した。 はじめに この文章は mala (twitter: @bul
スナック「jQuery」 - Qiita
……あら、いらっしゃい。 若いお客さんなんて珍しいわねえ。昔は、この街一番の人気店でね、若いお客さんもたくさんいたんだけどさ。最近はめっきり減っちゃってね。 何飲む？ ……水割り？ わかったわ。 じゃあさ、ちょっとだけ、あたしの昔話に付き合ってもらってもいいかしら。 What is jQuery? この店――『jQuery』がオープンしたのって、2006年なんだけどさ。その頃の、この街の様子って覚えてる？ ……知らないか。あなた、まだ若いもんね。その頃って、そりゃあヒドイもんだったのよ。 その頃、シェア率トップだったブラウザって、もちろんInternet Explorerだったんだけど。当時はバージョン7が登場したばかりで、あの悪名高きIE6もまだまだ主流だったの。 他のブラウザは、Safariがバージョン3がMacとWindowsに公開されていた頃で、Firefoxはまだバージョン2.0
音を操るWeb技術 - Web Audio API入門 - ICS MEDIA
Webにおける表現はどんどん進化しています。Webサイトには当然のように動画が埋め込まれるようになり、CSSやSVG、canvasでのさまざまな表現が頻繁に見られるようになりました。さらにAR、VRといった表現も台頭し筆者も毎日ワクワクしながらインターネットの海を泳いでいます。 その中であまりメジャーではないと感じるのは「音」による表現です。もちろん音を用いた素晴らしいWebサイトはたくさんありますが、環境の制約が視覚表現以上に大きいため多くは見られないのでしょう。 とはいえ、音と視覚表現を組み合わせることによって表現できる世界観、インタラクション、その他諸々は計り知れないと筆者は思っています。今後オーディオなどの技術の進歩によって上記で述べた制約も乗り越えられるようになるかもしれません。時代を先どりしたい読者に向けて、今回の記事ではWebで音を扱う技術Web Audio APIについてお
Gitでよく使用するコマンドをGIFアニメで解説
Gitでよく使用するコマンドが何を行っているかをGIFアニメで解説した記事を紹介します。 Gitのマージ、リベース、リセット、チェリーピック、フェッチ、プル、リフログなど、コマンドを実行した時にブランチはどのように相互作用し、履歴にどのような影響を与えるのか視覚的に学べます。 🌳🚀 CS Visualized: Useful Git Commands by Lydia Hallie 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに Gitのマージ（fast-forward, no-fast-forward） Gitのリベース（rebase） Gitのリセット（reset, revert） Gitのチェリーピック（cherry-pick） Gitのフェッチ（fetch） Gitのプル（pull） Gitのリフログ（re
【2020年版】無料＆商用利用可能なイラスト画像を提供するWebサービス8選を大公開！ - paiza times
どうも、まさとらん（@0310lan）です！ 今回は、Webサイトやブログなどで有効活用できる無料のイラスト画像を提供するサービスを厳選してご紹介します。 いずれも個人利用はもちろん、商用利用もOKなイラスト画像ばかりなうえ、ユーザー登録も不要なので手軽にダウンロードして使うことができます。 Webサイトに効果的なアクセントを追加したい人も含めて、ぜひ参考にしてみてください！ 【 Open Doodles 】 印象的なデザインのイラスト画像を無料で提供しているのが「Open Doodles」です。 PNG / SVG形式の画像ファイルをダウンロード可能で、さまざまな用途のWebサイトやブログなどで有効活用できるものばかりです。 たとえば、Webサイトの単純なテキストであっても、以下のように画像を配置するだけで効果的なアクセントになるわけです。 また、ジェネレーター機能も提供されており、自分
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
間違った採用サイトの特徴と改善方法
15年連載し続けたweb漫画の更新が突然途絶え、ファンが作者の住居連絡先を探し当てるまで発展【胎界主】
