はてなブックマーク

AI時代にWebデザイナーがスキルを「見える化」する方法を考えてみたデザインやイラスト、Webサイト制作、プログラミングなど、AIが多くの作業を行えるようになっています。これからは作業そのものよりも、課題の定義やアイデアを考えることなど、AIが苦手な部分が大切になってきそう。でも「理解を深める」「広い視野を持つ」といったスキルは数字で測りにくく、自分でも成長したか分かりにくいですよね。今回はそんなスキルを見えるようにする具体的な方法を紹介します。 ポートフォリオで可視化する数字にしにくいスキルは、言葉だけではなく具体的な事例で見せるのがわかりやすいです。 課題発見能力を見せる例えば「クライアントは『新規のお客さんを増やしたい』を悩みとして挙げたが、調査を重ねた結果本当の課題は『今のお客さんが離れてしまうこと』だった。そこで〇〇に注目してXXを提案をし、実施した結果、離脱率が20％減った。」

AIでWebページをサクッと作れる v0（ブイゼロ）使ってみたVercelが開発したAIを使ったWebサイト開発ツール「v0（ブイゼロ）」。テキストで指示を入力するだけで、フロントエンドのコードを瞬時に作成してくれます。特にWebサイト制作やプロトタイプ作成のスピードを大幅にアップできるみたい。そんなv0を試してみます！ v0を利用するにはVercelのアカウントが必要です。 左下の言語設定から日本語に変更可能です。 v0でできることv0はシンプルなテキスト入力だけで以下のようなことが可能です： Reactベースのフロントエンドコードを瞬時に生成Tailwind CSSを使ったデザインの生成UIコンポーネントやWebページのプロトタイプ作成既存コードへの簡単な統合や修正画像やFigmaファイルからWebページの生成初回の指示だけでなく、チャットでAIと対話しながらブラッシュアップしていくこ

WordPressからmicroCMSにデータを移行する方法Webクリエイターボックスは2024年11月にWordPressからmicroCMSに移行しました。いろんな方法がありますが、microCMSではCSVでのインポートが可能なので、WordPressでXMLデータをエクスポートして、PythonでCSVに変換して移行した手順を紹介します。 ざっくりとした移行手順WordPressのコンテンツデータをエクスポートmicroCMSのAPIを設定するPythonでWordPressデータ（XML）からCSVデータに変換microCMSの管理画面からCSVデータをインポート1. WordPressのコンテンツデータをエクスポートWordPressの管理画面で、［ツール］→［エクスポート］から、必要なコンテンツを選択し、「エクスポートファイルをダウンロード」ボタンをクリックします。この画面で

WordPressからNext.js + microCMS + Vercel に移行＆リデザインしましたこっそりXのスペースでも実況していたのですが、このWebクリエイターボックスのWebサイトをWordPressからNext.jsベースに作り変えました！デザインも結構変わっているので、詳細を書いておこうと思います。 使用技術Next.jsTypeScriptTailwind CSSmicroCMSVercelFormspreeデザインも変更ヘッダー部分は左側に固定してみました。初期のWebクリエイターボックスを知っている人なら、なつかしく思ってもらえるかもしれませんね！ また、ブログ色強めのレイアウトから、メディアサイトの形に変更。元々はブログ記事主体のブログサイトだったんですが、だんだんコンテンツも増えてきたので、ブログは「メディアサイトの一部」という立ち位置にしていこうかなと。 記事

「ITエンジニア本大賞2025」の特別ゲストに選ばれました！今年拙著『1冊ですべて身につくJavaScript入門講座』が大賞と特別賞のダブル受賞を果たしたITエンジニア本大賞。来年の「ITエンジニア本大賞2025」では、特別ゲストとして、2月に開催されるプレゼン大会へご招待いただきました！ありがとうございます！ ITエンジニア本大賞って？ITエンジニア本大賞はITエンジニアのみなさんに読んでほしい技術書・ビジネス書を選ぶイベントです。2014年からスタートし、今回が12回目の開催。 この1年を振り返って、仕事の役に立った本、初学者におすすめの本、ずっと手元に置いておきたい本など、おすすめの本を教えてください！ みなさんからの投票というかたちでおすすめの本をシェアしあうWeb投票と、投票の多かった本について、著者さん・編集者さんに語っていただくプレゼン大会。2つのイベントを通して大賞を決定

WordPressから乗り換える？他社CMSと移行方法を紹介世界中で大人気のCMS（Contents Management System：コンテンツ マネジメント システム）であるWordPress。日本では約8割のCMSがWordPressだそうですね。とっても使いやすくておしゃれなテーマも多く、カスタマイズ性も抜群！私も長年使っていますが、最近なにやら不穏な空気も。そこで、WordPress以外のCMSについて、簡単に紹介してみます。 ちなみに昨今のWordPress界隈のゴタゴタは、こちらの記事が簡潔でわかりやすいかもです： WordPress公式ディレクトリのAdvanced Custom FieldsがSecure Custom Fieldsに変わってしまう – Capital P – WordPressメディア とは言え、「WordPress、だめ絶対！」なんて言いませんよ！た

コーディングもするWebデザイナーがSTUDIOでWebサイトを作ってみたPodcastでノーコードツールでWebサイトを作ってみよう！STUDIOって最近よく聞くよねー！気になるねー！というお話になり、実際にひとつ簡単なWebサイトを作る予定もあったので、STUDIO使って制作してみました！ STUDIOとは？STUDIOは、HTMLやCSSでコードを記述する必要のない、ノーコードでのWebサイトデザインや制作ができる国産ツールです。サーバーの設定も不要で、STUDIOだけで設計から制作、公開までを一括管理できます。 日本製というのがポイントで、海外のツールやテンプレートで作ったWebサイトを日本語にした途端にダサくなったりしちゃうんですよね。しかしSTUDIOではモリサワが提供する500種類以上のフォントが使えるため、日本語でもデザイン性の高いWebサイトが作れます。 STUDIOでW

バナーデザイン練習 10本ノックデザインの勉強を始めて最初のうちは、とにかく数をこなすことがスキルアップへの近道です。架空のものでもいいので、ジャンルが偏らないようにバナーデザインから取り組んでみましょう！グラフィックツールの練習にもなりますよ！ デザインスキルを向上することが目的です。様々なジャンルのバナーデザインに挑戦しましょう！とは言え、どんなテーマでなんの広告を作ればいいか、パッと思いつかなかったりしますよね。そこで、架空の商品やサービスのバナーデザイン案をご用意しました！お題にあうバナーを作ってみましょう。10 個作り終わった頃には、だいぶコツが掴めてくるのではないでしょうか？毎日の空いた時間に、ぜひ挑戦してみてください！ 簡単なルール提示されているキャッチコピーや素材は必ず利用しましょう提示されている画像は特に注意書き等なければ、切り抜いて利用しても OK必要であればフリー素材

ChatGPTでデザインのレビューをしてもらおうAIはデザインやイラストを生成してくれるだけではありません。ファイルをアップロードすれば、その制作物の説明やレビューもしてくれます。その機能を使って、自分の作ったデザインのブラッシュアップをしてみましょう！ 無料ユーザーも OK！ChatGPT を活用する準備様々な AI がありますが、私がメインで使っているのはChatGPTなので、今回はこちらを使った方法を紹介します。ChatGPT はチャット感覚で質問した内容に答えてくれる AI です。より精度の高い有料プランもありますが、無料でも利用できます。さっそく右上の「Sign up」から登録しましょう。 注意点として、無料プランの場合、機能の利用に制限があります。ファイルのアップロードや上位モデルの GPT-4o は一定回数利用すると制限がかかるようなので、頻繁に利用しそうであれば有料プランを

まずはここから！Photoshopの生成AI機能を試してみよう！デザイナーのみなさん、話題のAIは使いこなせているでしょうか？興味はあるけど何から始めればいいかわからない、試してみたけど結局うまく使えない、なんて声も聞こえてきます。今回はPhotoshopの生成AI機能（Adobe Firefly）のうち、手軽に試せる、かつ汎用性の高い使い方を紹介します！ 足りない部分を補完私が最初に使い始めて便利だなー！と実感したのがこの機能。正方形の画像を横長に表示したいとき、左右の背景が足りずに困った事がある人も多いのではないでしょうか？そんなときは生成 AI を使いましょう！ まずは画像を用意し、Photoshop で開きます。そして実際にしようしたいサイズで切り取りましょう。この例だと左右に余白ができてしまっています。 この余白部分を選択して、画像の下部に表示されている「コンテキストタスクバー」

ChatGPTを活用したデザイン制作ChatGPT、使っていますか？私は有料プランでほぼ毎日利用しています。Google検索が最近アレなんで、ちょっとした調べ物にも、お仕事の簡単な作業にも使っていますよ。今回はデザインに焦点をあてて、日頃のデザイン作業に使っている方法をいくつか紹介します。 ChatGPT デザインを 0 から 10 までやってもらうのはまだ難しい結論から言うと、まったくなんの情報もないところから、デザインの完成まで頼むのは、まだ難しいかなと思います。ダミーの Web サイトの画面を作ってもらうとかならまぁまぁなクオリティで作ってはくれますが、それをクライアントに提案できるレベルかと聞かれると、うーん…と唸ってしまいます。 なので、最初から最後まで、素晴らしいクオリティで作ってもらうことは 1 年後くらいにまた試すとして、2024 年現在ではデザイナーのサポート役というのが

スライドをデザインする時に気をつけていることプレゼンをする時に必須なのがスライド。私も作成する機会がちょこちょこあります。基本的なデザインの原則はおさえつつ作っていくのですが、プレゼンテーションでの資料として参加者にみてもらうことを前提に考えた時に、特に気をつけているポイントを紹介します。 背景色は暗くする？明るくする？最初に設定するのはスライドの背景色。会場での登壇の場合、会場内を暗くしていることが多く、それに合わせてスライドの背景色も黒にします。と言うのも、以前「Web サイトをダークモードに対応させよう」という記事でも書きましたが、どうも私、暗いところだと明るいディスプレイが眩しすぎて何も見えなくなっちゃうんですよね。そのため、会場が暗いならそれにあわせてスライドも暗くします。 逆に会場が明るいのであれば白い背景色にします。事前に主催側に確認をとるといいですね。 大きな文字サイズでこ

Tailwind CSSを使う時の疑問と解決方法制作時に「CSSファイルをこれ以上増やしたくない…」「クラス名を考えるのしんどい…」なんて思ったことはないでしょうか？私はあります！あれこれ試した結果、Tailwind CSSが使いやすかったので、導入時につまづいたポイントと解決方法をまとめてみます。 Tailwind CSS とはTailwind CSSは、あらかじめ多くのクラスが用意されている CSS フレームワークです。Web サイトを制作する時に、HTML の要素に直接、定義済みのクラスを付与して使用します。基本的に 1 つのクラスに 1 つのスタイルが当てられていて、例えば「m-0」というクラスをつけると margin: 0px; が、「w-full」というクラスをつけると width: 100%; が加えられます。 実際にどんなものか見たほうが早そうです。これまでの記述方法だと、

書籍執筆しました！『改訂版 1冊ですべて身につくHTML & CSSとWebデザイン入門講座』多くの方に読んでいただいたWebサイト制作の入門書、『1冊ですべて身につくHTML & CSSとWebデザイン入門講座』。発売から5年の月日が経ったので、改めて内容を精査し、加筆もした『改訂版 1冊ですべて身につくHTML & CSSとWebデザイン入門講座』が2024年3月2日発売！ カバーイラストはこれまでと同様ICHIRAKU STUDIO 様に描いていただきました！今回も素敵なイラストをありがとうございます！ こんな人におすすめこれから Web サイトを作り始める初心者HTML と CSS を基本から学びたい人美しいデザインの Web サイトを作りたい人Web サイト制作の最新技術を学びたい人初心者向けに Web サイト制作を教えている人メインターゲットは「これから Web サイトを作って

最近Sassを使ってないなぁって話初学者向けの記事やSNSの投稿で「Sassはマジで必須！」なんて書いているのを見かけますが、私の場合、そういえば最近は素のCSSばかりでSassは使っていないなーと思ったので記事にしてみます。私自身Sassが大好きでずっとお世話になっていましたが、CSSの進化も著しく、使い所があまりなくなってきているんですよね。 変数やネスト、計算は CSS だけで OK過去記事「Sass 不要！CSS だけでも変数やネスト、演算子が使えるよ！」でも書いたとおり、Sass のメリットでもある変数やネスト、数値の計算は CSS だけでも可能です。 変数は過去記事「CSS で変数（カスタムプロパティ）を使ってみよう」で紹介したように、メディアクエリーによって柔軟に変化させたい時は、Sass よりも CSS のカスタム変数の方が便利です。計算式を使いたいときも、CSS なら異な

2023年9月27日 書評 Web制作やデザインに関する情報は、インターネット上以外にも書籍を通して体系的に学ぶことができます。今月も様々な本を拝読しました。その中でいいなと思った物、オススメの物をいくつか紹介します。 ↑私が10年以上利用している会計ソフト！ コンセプトの教科書 あたらしい価値のつくりかた

【第5弾】少しのコードで実装可能な10のCSS小技集CSS小技集シリーズの第5弾！「【第4弾】少しのコードで実装可能な10のCSS小技集」から約2年。またまた便利でサクッと使えるコードが続々登場しています！初心者さんからベテランさんまで要チェック！ 【第 4 弾】少しのコードで実装可能な 10 の CSS 小技集 目次ネストで親子セレクターを管理チェックボックスやラジオボタンの色を変更アスペクト比を指定する新しいメディアクエリーの範囲指定方法背面の要素をぼかす要素を画面のど真ん中に固定表示空の要素にスタイルをあてる条件に合致しないセレクターにスタイルをあてるスムーススクロールのジャンプ位置動いている CSS アニメーションを止めるHTML・CSS の全コードは各サンプルの「HTML」や「CSS」タブを、別タブでのサンプル表示は右上の「EDIT ON CODEPEN」をクリックしてご覧くださ

デザイナー向けの解説本は多数存在しますが、こちらは少し珍しい「デザインの発注」に特化した本です。デザインのプロではない発注者が、どのように指示すればうまく伝わるのか？といった、デザイナーでない人がデザインの工程に参加するための具体的な方法をまとめています。デザイナーにもそうでない方にもおすすめなのが、本書の最後に掲載されている「クリエイティブに生きるための7つの習慣」。意識を少し変えるだけで、よりクリエイティブな暮らしができるはず。 『すべての仕事はデザインから始まる。』を購入する 皆さんのおすすめの本もぜひ教えてくださいね！著者、出版社さんからの自薦はお問い合わせフォームからご連絡ください！ シェアする Twitter Facebook はてブ Pocket ニュースレター Web制作の最新情報やWebクリエイターボックスからのお知らせ、中の人の近況等を定期的にお送りいたします。 ぜひご

ChatGPTに聞く：Next.jsでNotion APIを使ったお知らせページを作成自力でコードは書かず、ChatGPTを使ってToDoアプリを作っていた友人を見て、「何それ面白そう！」と思ってさっそく試してみました！今回は前から気になっていたNotion APIを使って、Next.jsでWebページ上にお知らせページを作っていきます。簡易ブログのようなものですね！ ChatGPT を使って ToDo アプリを作りながらフレームワークを学んでみた 完成形お知らせ一覧ページにタイトルを表示し、クリックしたら詳細ページに飛ぶというシンプルなもの。制作時間は 1 時間くらいでしょうか。デザインはなしで、とりあえず表示だけを目指してみました。 コード全文はGitHub で公開しているので、似たようなものを作ろうと思っていた方は参考にしてみてください。ちなみに Next.js に新規で追加したのは

2023年8月13日 話題のWeb関連情報 WebクリエイターボックスのTwitter: @webcreatorboxでは毎日Webに関する記事や美しいデザイン・写真などを紹介しています。その中で今週人気だったWeb関連の情報トップ10を紹介します。見逃してしまった人はこちらでチェック！まだフォローしてない人はお気軽にフォローしてみてくださいね！ ↑私が10年以上利用している会計ソフト！ 1. ロゴ：さよならTwitterの青い鳥。11年使われたアイコン、デザイナーが解説 ロゴ：さよならTwitterの青い鳥。11年使われたアイコン、デザイナーが解説 https://t.co/llibs7QqkE — Webクリエイター ボックス (@webcreatorbox) July 25, 2023 2. Twitter Japanのアカウント名を「X Japan」と書けず、Japanだけになって

一行追加でコンタクトフォームを実装できる【Formspree】Webサイトにコンタクトフォームを設置する方法として、以前「初心者でも簡単！日本語で手軽に設置できるフォーム作成サービス3選」という記事にて外部サービスを紹介しました。でもHTMLとCSSだけで設置できるなら、初心者でもカスタマイズしやすいですよね。ということで今回は「Formspree」を使った設置方法を紹介します！ 初心者でも簡単！日本語で手軽に設置できるフォーム作成サービス 3 選 Formspree とはFormspreeは PHP などのサーバーサイドのコーディングなしで、簡単に Web サイトにフォームを設置できるサービスです。どれくらい簡単かというと、通常 HTML でフォームを設置するときに使う form タグに、以下のような action 属性を追加するだけです！ <form action="https://f

WordPressの記事をMarkdown形式に一括出力する方法WordPressで運営していた記事をJAMStackサイトに移行したり、GitHubで管理したいというとき、記事数が少なければチマチマ手作業でも問題なさそうですが、数十、数百の記事を手作業するのはさすがにしんどいですよね。今回はたまりにたまったWordPressの記事をMarkdown形式に一括で変更、ダウンロードする方法を紹介します。 1. WordPress の記事をエクスポートWordPress 管理画面の「ツール」→「エクスポート」から書き出したいコンテンツを選びます。画像や本文データすべて利用する場合は「すべてのコンテンツ」を選んで「エクスポートファイルをダウンロード」ボタンをクリック。XML 形式のファイルがダウンロードされます。 エクスポートしたデータは、ひとまずわかりやすいフォルダーに格納しておきます。ここで

非デザイナーがFigmaでデザインの確認時に抑えておきたいポイント人気ですよね、Figma。デザイナーではないけど、デザインのレビューをする立場の人も、この頃何かと話題のFigmaが気になっているのではないでしょうか。今回はデザイナーからFigmaのファイルが共有されたけど、何をすればわからない！という人向けに、デザインのレビュー時にこれだけは抑えておきたいというFigmaの設定の流れや機能を紹介します。 Figma を使うメリットFigmaは世界的にも大人気の、無料で使えるデザインツールです。人気の理由は、主に以下のような共同作業のしやすさがあげられます： インストールする必要がないコメントの共有がしやすいバージョン管理ができるデザイナーであれば自分の持っている PC や Mac に Figma のアプリをインストールして利用したほうが使いやすいかな、と思いますが、サクッと確認するだけで

私が作業中に聞いているITやWebデザイン関連のPodcast仕事中はBGMを流していますか？私は集中したい時やがっつり考えなきゃいけない時などは無音、または環境音を流してたりしますが、頭をさほど使わない単純作業のときには音声型の配信コンテンツであるPodcastを流していたりします。そこで今回は私が登録しているPodcastをご紹介します！ 現役 Web 制作会社の代表によるクリエイター向け仕事力アップのための番組。声優をされていた経歴もあるため、本当に心地よい声で、飽きることなく聞き続けられます。Web 業界に関する動向や働き方、ひいては人生論まで、幅広いお悩みに答えてくれますよ。 ひまじんプログラマーの週末エンジニアリングレッスン 駆け出しエンジニアに対するメンタリングを盗み聞き！というコンセプトの Podcast。最新のツールや仕事術、考え方などの真面目トークから、プログラミングに

2023年5月30日 書評 Web制作やデザインに関する情報は、インターネット上以外にも書籍を通して体系的に学ぶことができます。今月も様々な本を拝読しました。その中でいいなと思った物、オススメの物をいくつか紹介します。 ↑私が10年以上利用している会計ソフト！ ちいさくはじめるデザインシステム