2023年はAIの年今年、話題から逃れられないほど、AIに関する話題が非常に盛り上がりました。画期的な革新は少なかったものの、既存の技術が徐々に洗練されているのが感じられます。洗練されてきたからこそ、私の働き方に影響を与えたのかもしれません。革新的な出来事は少なかったですが、多くの新しいモデルやサービスが発表されました。以下に挙げるのはその一部です。 テキストGoogle BardLlama 2GrokCustom Instruction for ChatGPTOverflow AI画像Adobe FireflyDALL·E 3Midjourney v6Stability AIShutterstock AI自分のイラストのテイストを基にFireflyで生成した例。ビデオGen-2 by RunwayPikaHeyGen今年の AI に関する政策や規制の動向を包括的に捉えるには、タイムライン

本記事は 【Advent Calendar 2023】 23日目の記事です。 🎄 22日目 ▶▶ 本記事 ▶▶ 24日目 🎅 「ChatGPTを使ってない人は人生を悔い改めた方がいい」 2023年10月4日、「SoftBank World 2023」の基調講演で登壇した孫正義氏がChatGPTについて言及した興味深い言葉です。 ↓こちらからぜひご覧ください（SoftBank World 2023） www.youtube.com 孫正義氏の言葉にハッとさせられたことを背景に、自身のWebディレクター業務でChatGPTを活用できそうなシーンを検討し、記事にまとめることにしました。 この記事では、Webディレクターとしての経験から、ChatGPTを効果的に利用する際のシナリオや、おすすめのプロンプト管理ツールについて紹介します。 Webディレクター業務におけるChatGPTの活用用途 C

2023年もあと数日ですね⛄️🎍 毎年この時期になると、その年に印象的だったサイトをご紹介する記事を書かせていただいていましたが、なんと今年は、僕だけではなく、日頃からWebデザインへのアンテナの感度の高い『8組のゲスト』をお招きした特別企画をお届けします。 毎年楽しみにしていた方も、初めて見てくださる方も、 S5-Style Presents 「2023年総まとめ 特別版」をお楽しみください！😃 それでは、まずこちらの方からからです！ -- 01 平尾 誠 (ARUTEGA Inc)👤💬 素晴らしいサイトの中から、題材が難しいサイトや、情報設計が秀逸なサイトを気づいたら選んでいました。今回の企画に参加するにあたり、普段からいろんなサイトに追いつきたくて、モチベーションをいただけている事に気づけました。 株式会社HA-RUhttps://ha-ru2017.co.jp/島根のダクト

こんにちは、Technology部のジョシュです。 今回は、OpenAIのDALL-EとChatGPTを使用して、UIデザインからコーディングまで行う方法を紹介します。 DALL-Eはテキストからリアルな画像を生成できるAIツールですが、添付された画像を分析し、それをもとにコードを生成することもできます。 本記事ではDALL-Eを使ってUIデザインを作成し、生成された画像をもとにChatGPTでTypeScriptのコード生成を行いました。実際に使用したスクリプトも紹介しつつ、実装までの流れを解説したいと思います。 ※企業の生成AI活用事例をまとめた記事もございます。ぜひご覧ください！ DALL-EとChatGPTでデザインを作成する 基礎知識：今回使うツールについて 今回は下記3つのツールを使用します。 ChatGPT:テキストを理解し、会話を生成するために訓練されたOpenAIのAIモ

Mozillaは、基本的な情報を入力するとAIが自動的にWebサイトのデザインを作成し、Webサイトの公開まで可能なサービス「Solo」を公開しました。 Soloは基本的に個人事業主が自分のビジネスのためのWebサイトを構築することを想定してWebサイトを作ってくれます。その理由をMozillaは次のように説明しています。 In 2023, website creation is still hard. While choosing a template is straightforward, sourcing images, writing content, and making a visually appealing site are really time-consuming. Add the requirements for showcasing reviews, schedul

「このWebサイト、素敵。」と感じさせるモノとは、一体何でしょう。 それはデザインなのか、それとも機能性なのか、または「このフォント、配色が好き」といった特定のデザイン要素かもしれません。 ずばり、この問題の答えはポンと出せるほど単純ではなく、これらの要素を組みあわせることで、素晴らしいWebサイトは生まれます。 この1年間で、デザイン制作の参考にしたいWebサイトを２００以上紹介してきました。 製品やサービスを販売、紹介するサイトや、実験的なサイト、情報を提供する教育的なサイト、政治的なサイト、そして夢中になる体験型サイトまで、業種もさまざまです。 この記事では、デザインアイデアにしたり、トレンドを分析したり、２０２３年の振り返りに最適な５０のWebデザインを厳選してご紹介します。

米Adobeは12月18日（現地時間）、デザインコラボレーションツールを手掛ける米Figmaの買収を断念すると発表した。同買収については、欧州委員会や英国の競争・市場庁などが懸念を示しており、買収に必要な承認が得られないと判断したことから合併契約の終了を決めたとしている。 Figmaの買収は2022年9月に発表。買収額は200億ドル（当時のレートで約2.9兆円）で、23年内の完了を見込んでいた。この件についてAdobeのシャンタヌ・ナラヤンCEOは、「AdobeとFigmaは、規制上の調査結果に強く同意しませんが、独立して前進することがそれぞれの最善の利益になると信じています」とコメント。 Figmaのディラン・フィールドCEOは、同社の公式ブログを更新し「世界中の規制当局と何千時間も費やして当社の事業、製品、当社がサービスを提供する市場の違いを詳しく説明したにもかかわらず、この取引を規制

今までJavaScriptを使用しないと実装できなったことが、CSSだけで実装できるようになったものが増えてきました。たとえば、表示・非表示をdisplayプロパティでアニメーションできるようになったり、スクロールをトリガーにしたアニメーションなど、新機能が登場しました。 今回紹介するのは、height: 0;からheight: auto;へのトランジションです。高さが固定値であれば簡単にアニメーションできますが、コンテンツ量が不明で成り行きの場合はJavaScriptで高さを取得する必要がありました。 height: 0;からheight: auto;へのトランジションをCSSで実装する方法を紹介します。元記事を読んで、CSS Gridをここで使用するのか！ と驚きました。 🧙‍♂️ CSS trick: transition from height 0 to auto! by Fra

朗報です！ 来年の2024年に、ブラウザはCSSから画像の実際の幅を取得し、それを画像のサイズとして使用することができるようになります。 srcsetで遅延読み込みされた画像の場合、ブラウザはsrcsetからソースURLを選択するために画像のレイアウト幅を使用できるようになります。 Add sizes=auto to lazy-loaded <img> これにより、Webデベロッパーはsizes属性を省略したり、loading=lazyを持つ<img>要素に対して明示的にsizes=autoを設定することができます。 ブラウザは、画像のレイアウト幅にsrcset属性の値を使用します（遅延画像は、レイアウトが判明するまで読み込みを開始しません）。遅延ではない画像の場合は無効で、100vwと同等になります。 sizes=autoはレスポンシブ対応の<img>に特に強力です。複数のバージョンの画

「いらすとや」の素材がAdobe Expressに新搭載。豊富なイラストをデザインに取り入れよう 季節のイベント・動物・人物などのかわいいイラストを個人利用・商用利用ともに無料で提供するフリー素材サイト「いらすとや」とAdobe Expressが連携し、Adobe Expressの「アドオン（Add-on）」経由で素材を使用できるようになりました。 アドオンとは、Adobe Expressに追加して新たに機能を拡張することができるツールです。具体的には、Adobe Expressで提供されていない画像、動画や音楽素材を追加したり、外部サービスと連携したりすることができるようになります。 「いらすとや」のアドオンでは、3万点以上のいらすとやの素材の一部が期間限定でAdobe Expressのアプリ上で検索可能になり、制作中のバナーやチラシにワンクリックで追加することができます。お正月や花見な

気付かないうちに意図しない判断に誘導される「ダークパターン」と呼ばれるウェブデザインについて、専門家による大規模な調査結果がまとまりました。回答者の半数近くが「不利益を被ったことがある」と回答していて、専門家は、対策を強化する必要があるとしています。 ショッピングサイトで商品を購入する際に、▽定期購入であることが小さく表示されて意図せずに申し込んでしまったり、▽選択肢が「はい」と「あとで回答する」しかなく何度も表示されたりするケースなど、消費者が意図しない判断に誘導されるウェブデザインは「ダークパターン」と呼ばれ、対策の必要性が指摘されています。 こうした中、ウェブデザインのコンサルティングなどを行う企業が「ダークパターン」の実態について大規模調査を行い、このほど結果がまとまりました。 調査はことし8月にアンケート形式で行われ、ウェブサービスの利用者およそ800人から回答を得ました。 その

コロナ禍中に取得された地方自治体のドメインがオークションで高値売買され、中古ドメインとして悪用されるなど、公的機関のドメイン放棄問題が注目されています。 11月25日のNHKニュース7でドメイン流用の件が報じられました。私も取材を受け少しご協力をしています。 www3.nhk.or.jp 公的機関のドメイン放棄問題の理想の解決は、今後は lg.jp、go.jp などの公的機関しか使えないドメインだけを使うようにすることです。 ただ今回の問題はコロナ禍初期の大混乱時、非常にスピーディにサイト立ち上げが求められていた時の話です。 信頼が求められる lg.jp などのドメインの利用には厳格なルールがあるのも当然です。あの混乱時期にルール改定も難しかったと思います。新規ドメインが選ばれた事は仕方がない事と思っています。 ただ、コロナ禍が落ち着いた今、無責任に放棄されるのは明らかな問題です。 今回の

DALL-E3を実装日からほぼ毎日使用し面白さにとりつかれています。何となくで触っているため, いまいち思った画像が出来ないことも多々ありましたので今回まじめに作成法を勉強してみました。初級編と名前がついているのは高等テクニックを教えるほどの技術がないだけで後に上級編が控えているという意味ではないです。 0. はじめに DALL-E とはシンプルなテキストのみで画像がつくれるAIです。 簡単なテキストのみで画像生成語源は『ウォーリー探せ』と芸術家の『ダリ』から来ているみたいです。ウィーリーはある種の「探し物」をする, userが提示するテキストのプロンプトから隠された要素やまだ見ぬ画像を「探し出し」生成することらしいです。 ウォーリーをインスパイアした少年1. 問題点, 主に著作権やはり何と言っても著作権問題ではないでしょうか。現在法整備が進行しているところです。OpenAIはコンテンツポ

株式会社ICSの池田・西原・松本の3人で『フロントエンドの知識地図 〜 一冊でHTML/CSS/JavaScriptの開発技術が学べる本』という書籍を執筆しました！ ICS MEDIAではHTML・CSS・JavaScriptにおける最新技術をテーマに取り扱っています。ウェブメディアの特性上、記事は断片的な情報となることが多く、体系的な発信が難しいと我々は課題感を持っていました。そこで、この書籍ではICS MEDIAでは発信の難しかった、フロントエンドの全容を一冊で伝えることを目指しています。 2023年11月24日の発売で、Amazonや書店や電子版で購入できます。 Amazon サポートページ 2023年4月に執筆を開始し、フロントエンドのトレンドをまとめてキャッチアップできるようテーマを選定しました。344ページで、紙面はフルカラー。内容の厚みにたいして、定価2,860円（本体2,6

「デザインとは何か？」 これはデザイナーにとっても、それ以外の人々にとっても永遠の問い。 人によって「デザイン」の概念が異なり、それが理由でミス・コミュニケーションがやちょっとした争いすら発生する原因にもなっているからだ。 同じく現代の「デザイナー」と呼ばれる人たちの役割も多種多様で、一言で表現するのはかなり難しい。 そして「デザイン」の担う領域がどんどん広がっている現代において「デザインとは？」という問いは、例えば「言葉とは何か？」といった問いに近いレベルだ。 英語のdesign, Design, DESIGN その違いを知っていますか？ 結局デザインとは何なのか？さて、本題に戻ろう。 デザインとは何であるか？これを言い換えると「デザインの役割とは？」である。 人生をデザインに捧げてきた人間として自分なりにその答えをここに表記する。間違っているかもしれないが…。 大きく分けてデザインの役

LINEヤフーにおけるこれからのアクセシビリティというスライドで「WCAGはハードルが高い」という文言を見かけました。どうしてハードルが高い、言いかえるならば難しいとされるのか、その難しさはどこから来るのかをちょっと深掘りしてみようと思います。 WCAGという言葉について、改めて見ておきましょう。WCAGはもっぱら、Web Content Accessibility Guidelines（ウェブコンテンツアクセシビリティガイドライン）というW3Cの発行する技術文書を指すわけですけども、現時点でよく参照されるのがウェブアクセシビリティ基盤委員会（WAIC）が公開している日本語訳のWCAG 2.1でしょう。ちなみに本家のW3Cは、WAICが現時点で公開しているWCAG 2.1の改訂版を今年9月に公開し、さらにバージョンの進んだWCAG 2.2を先月に発行したばかりだったりします。 WCAG 2

[レベル: 中級] モバイル ファースト インデックス（以下、MFI）への切り替えがすべてのサイトで完了したことを Google は検索セントラルブログで宣言しました。 発表から 7 年かけての完了 MFI をまったく、あるいはほとんど知らない人もいそうなので、簡潔に説明しておきます。 MFI は、スマートフォン用 Googlebotがクロールしたモバイル向けサイトをランキング評価に使用する仕組みです。 従来は、パソコン用 Googlebot がクロールした PC 向けページをランキング評価に使用していました。 MFI 移行のこれまでの経緯は次のようになります。 2016 年 10 月：MFI の構想が明るみになる 2016 年 11 月：MFI 構想の正式発表 2018 年 3 月：MFI の移行開始 2023 年 11 月：MFI移行の完了 ← 今ここ 全サイトの MFI 移行は、実質