はてなブックマーク

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

CHAPTER　1 デザインを始める前に CHAPTER　2 レイアウト CHAPTER　3 配色 CHAPTER　4 タイポグラフィ CHAPTER　5 写真とイラスト CHAPTER　6 デザインのアイデア集 カバーイラストはこれまでと同様岡村亮太様に描いていただきました！今回も素敵なイラストをありがとうございます！ 予約する こんな人におすすめ これからデザインをはじめる初心者 HTMLとCSSの基礎を学んだあと、何を勉強しようか考えていた人 一度デザインを勉強したけど挫折した人 Webとグラフィックの両方のデザインを学びたい人 デザイン制作のアイデアをもらいたい人 デザインって結局どう進めればいいかわからず迷子な人 デザインは才能ではなく、きちんとルールや仕組みを学べば誰でも取り組めるものだよ！という気持ちをたっぷりと込めて書きました。これからはじめてみたい人が第一歩目を踏み出せる

2024年10月17日 Webサイト制作, Wordpress, 便利ツール 世界中で大人気のCMS（Contents Management System：コンテンツ マネジメント システム）であるWordPress。日本では約8割のCMSがWordPressだそうですね。とっても使いやすくておしゃれなテーマも多く、カスタマイズ性も抜群！私も長年使っていますが、最近なにやら不穏な空気も。そこで、WordPress以外のCMSについて、簡単に紹介してみます。 ↑私が10年以上利用している会計ソフト！ ちなみに昨今のWordPress界隈のゴタゴタは、こちらの記事が簡潔でわかりやすいかもです： WordPress公式ディレクトリのAdvanced Custom FieldsがSecure Custom Fieldsに変わってしまう – Capital P – 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年以上利用している会計ソフト！ ちいさくはじめるデザインシステム

Sass不要！CSSだけでも変数やネスト、演算子が使えるよ！CSSをより便利に、効率よく記述できるSass。利用しているWebサイト制作者も多いでしょう。近年はCSSでもSassのような書き方ができるようになってきているので、Sassとの書き方の違いとともに紹介します！ 変数何度も利用する値を変数として定義し、使いまわせます。よく利用する数値や、色が連想しづらいカラーコードに利用するといいでしょう。 Sass の場合の書き方$ マークに続いて任意の変数名を書き、コロンで区切って変数の値を記述。この値が呼び出されるようになります。実際に使いたい箇所では $ マークと変数名を書けば、変数を呼び出せます。 $main-gutter: 30px; .box { width: 300px; height: 100px; margin: $main-gutter; } CSS の場合の書き方公式では「

プレゼンの内容もスライドもCanvaのAI機能で作ってみたCanvaは、用意された多数のテンプレートから、オンライン上で簡単にグラフィックデザインができるツールです。無料でも利用可能ですよ！そのCanvaにAIであれこれ便利に作れちゃう機能が追加されたと耳にしたので、さっそく使ってみました！ Canva 文章を考えてもらえる！Canva のアカウントを作成し、ログインすると、作成したいコンテンツのジャンルを選べるようになっています。文章を作りたいので、「Docs」から「Docs to Decks」を選択しましょう。 こんな感じのデフォルトの文章が用意されています。画面上部のオプションバーから書式の選択ができますし、慣れている人はマークダウン形式でサクサク書き進められますよ。 ひとまず拙著『1 冊ですべて身につく JavaScript 入門講座』の文章をコピペして挿入してみました。 さて、こ

UIコンポーネントの作成指示やプレビュー表示ができる【ChatGPT AI component generator】ChatGPTの話題がつきないですねー！私も日々遊んでみたり、お仕事に導入してみたりと、あれこれ試しています。そんな中見かけたのがChatGPT AI component generatorという、Webサイトのコンポーネント制作に役立ちそうなツールです。 ChatGPT AI component generator とはChatGPT AI component generatorはChatGPTをベースに、指定した Web サイトのパーツ、コンポーネントのコードを生成してくれるオンラインツールです。 使い方はとっても簡単。1. の入力欄に作りたいパーツの説明を入力。日本語でも OK です。ここでは「送信って書かれたボタン」という超絶ざっくりした説明を書いてみました。2. の