はてなブックマーク

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メディア とは言

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

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

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

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

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

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

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

CHAPTER 1 最初に知っておこう！ Webサイトの基本 CHAPTER 2 Webの基本構造を作る！ HTMLの基本 CHAPTER 3 Webのデザインを作る！ CSSの基本 CHAPTER 4 シングルカラムのWebサイトを制作する CHAPTER 5 ２カラムのWebサイトを制作する CHAPTER 6 タイル型のWebサイトを制作する CHAPTER 7 外部メディアを利用する CHAPTER 8 うまくいかない時の解決方法 カバーイラストはこれまでと同様ICHIRAKU STUDIO様に描いていただきました！今回も素敵なイラストをありがとうございます！ 購入する こんな人におすすめ これからWebサイトを作り始める初心者 HTMLとCSSを基本から学びたい人 美しいデザインのWebサイトを作りたい人 Webサイト制作の最新技術を学びたい人 初心者向けにWebサイト制作を教え

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

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

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

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

2023年10月20日 React, 便利ツール 自力でコードは書かず、ChatGPTを使ってToDoアプリを作っていた友人を見て、「何それ面白そう！」と思ってさっそく試してみました！今回は前から気になっていたNotion APIを使って、Next.jsでWebページ上にお知らせページを作っていきます。簡易ブログのようなものですね！ ↑私が10年以上利用している会計ソフト！ 完成形 お知らせ一覧ページにタイトルを表示し、クリックしたら詳細ページに飛ぶというシンプルなもの。制作時間は1時間くらいでしょうか。デザインはなしで、とりあえず表示だけを目指してみました。 コード全文はGitHubで公開しているので、似たようなものを作ろうと思っていた方は参考にしてみてください。ちなみにNext.jsに新規で追加したのは以下の5つのファイルだけです： utils/notions.js pages/api

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だけになって

2023年11月8日 Webサイト制作, 便利ツール Webサイトにコンタクトフォームを設置する方法として、以前「初心者でも簡単！日本語で手軽に設置できるフォーム作成サービス3選」という記事にて外部サービスを紹介しました。でもHTMLとCSSだけで設置できるなら、初心者でもカスタマイズしやすいですよね。ということで今回は「Formspree」を使った設置方法を紹介します！ ↑私が10年以上利用している会計ソフト！ Formspreeとは FormspreeはPHPなどのサーバーサイドのコーディングなしで、簡単にWebサイトにフォームを設置できるサービスです。どれくらい簡単かというと、通常HTMLでフォームを設置するときに使う form タグに、以下のような action 属性を追加するだけです！ <form action="https://formspree.io/f/あなたのID" me

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

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

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

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

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

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

2023年3月21日 Webサイト制作, 便利ツール ChatGPTの話題がつきないですねー！私も日々遊んでみたり、お仕事に導入してみたりと、あれこれ試しています。そんな中見かけたのがChatGPT AI component generatorという、Webサイトのコンポーネント制作に役立ちそうなツールです。 ↑私が10年以上利用している会計ソフト！ ChatGPT AI component generator とは ChatGPT AI component generatorはChatGPTをベースに、指定したWebサイトのパーツ、コンポーネントのコードを生成してくれるオンラインツールです。 使い方はとっても簡単。1. の入力欄に作りたいパーツの説明を入力。日本語でもOKです。ここでは「送信って書かれたボタン」という超絶ざっくりした説明を書いてみました。2. のセレクトメニューでは生成す

2023年10月20日 Webサイト制作, 便利ツール アメリカのOpenAIが公開した自然な文章を生成する人工知能（AI）、ChatGPT。チャット形式で質問に答えて自然な言葉で返してくれます。みなさんもう使ってみましたか？今回は「AIによる自動Webデザイン」について、ChatGPTにブログ記事を書いてもらいました！ChatGPTを使ってみた中の人の感想は記事の最後に掲載しますね。 ↑私が10年以上利用している会計ソフト！ ↓ ここからChatGPTの生成した文章です。↓ 近年、人工知能(AI)技術はWebデザインにも影響を与えています。自動Webデザインという手法が開発され、Webサイトのデザインを自動的に行うことが可能になりました。 この自動Webデザインは、ビジネスオーナーやマーケターなどのWebサイトを作成することを求められていない人たちにとって非常に有用です。Webサイトを作