まずはここから！Photoshopの生成AI機能を試してみよう！
2024年5月16日 AI, Photoshop デザイナーのみなさん、話題のAIは使いこなせているでしょうか？興味はあるけど何から始めればいいかわからない、試してみたけど結局うまく使えない、なんて声も聞こえてきます。今回はPhotoshopの生成AI機能（Adobe Firefly）のうち、手軽に試せる、かつ汎用性の高い使い方を紹介します！ ↑私が10年以上利用している会計ソフト！ 足りない部分を補完 私が最初に使い始めて便利だなー！と実感したのがこの機能。正方形の画像を横長に表示したいとき、左右の背景が足りずに困った事がある人も多いのではないでしょうか？そんなときは生成AIを使いましょう！ まずは画像を用意し、Photoshopで開きます。そして実際にしようしたいサイズで切り取りましょう。この例だと左右に余白ができてしまっています。 この余白部分を選択して、画像の下部に表示されている「
雑誌からデザインを学ぼう
2024年4月25日 Webデザイン, インスピレーション みなさん、雑誌読んでいますか？紙の雑誌は手に取らなくなった人も、電子版なら読んでいるという人もいるかもしれませんね。実は私、お試しのつもりがうっかり楽天マガジンの年間購読に課金しちゃったもので、せっかくだからと読み倒している今日このごろ。眺めているとあしらいやレイアウトが自由で見ていて楽しいんですよね。デザインの勉強中の方にもおすすめなので、雑誌を見るポイントや、おすすめ勉強方法を紹介します。 ↑私が10年以上利用している会計ソフト！ デザインの注目ポイント Webデザインを考えているとき、Webサイトだけ見ていてもなんだかアイデアもレイアウトも偏ってしまうことがあるかと思います。そんな時は雑誌を見てみましょう！ レイアウト パラパラとページをめくるだけでも感じられるのが、本当に自由度が高い！サイズやページ数という制限はありつつも
ChatGPTを活用したデザイン制作
2024年3月28日 Webデザイン, 便利ツール ChatGPT、使っていますか？私は有料プランでほぼ毎日利用しています。Google検索が最近アレなんで、ちょっとした調べ物にも、お仕事の簡単な作業にも使っていますよ。今回はデザインに焦点をあてて、日頃のデザイン作業に使っている方法をいくつか紹介します。 ↑私が10年以上利用している会計ソフト！ デザインを0から10までやってもらうのはまだ難しい 結論から言うと、まったくなんの情報もないところから、デザインの完成まで頼むのは、まだ難しいかなと思います。ダミーのWebサイトの画面を作ってもらうとかならまぁまぁなクオリティで作ってはくれますが、それをクライアントに提案できるレベルかと聞かれると、うーん…と唸ってしまいます。 なので、最初から最後まで、素晴らしいクオリティで作ってもらうことは1年後くらいにまた試すとして、2024年現在ではデザイ
Tailwind CSSを使う時の疑問と解決方法
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%; が加えられます。 実際にどんなものか見たほうが早そうで
スポーツイベントのWebサイトを作る時のポイントや実例
2023年10月5日 Webデザイン, インスピレーション 私の個人的SNSでちょこちょこ投稿しているのですが、今年からトライアスロンを始めまして、様々なスポーツイベントのWebサイトを閲覧する機会が増えました。そこで気づいたスポーツイベントや大会のWebサイトの特徴や、デザインのポイントをまとめてみます！ ↑私が10年以上利用している会計ソフト！ スポーツイベントのWebサイトをデザインする時のポイント さまざまなスポーツイベントのWebサイトを調査しながら感じた共通点や、制作時のポイントなどを見ていきましょう。 動画や画像を大きく使う スポーツやイベントに関連する写真や動画を使用して、イベントの雰囲気を強く表現するといいでしょう。自分の興味のあるスポーツをかっこいい画像や映像で見れれば、ユーザーの心も惹きつけられます。 世界的に有名なIRONMANのWebサイトでは、ファーストビューで
【第5弾】少しのコードで実装可能な10のCSS小技集
2023年9月7日 CSS CSS小技集シリーズの第5弾！「【第4弾】少しのコードで実装可能な10のCSS小技集」から約2年。またまた便利でサクッと使えるコードが続々登場しています！初心者さんからベテランさんまで要チェック！ ↑私が10年以上利用している会計ソフト！ 目次 ネストで親子セレクターを管理 チェックボックスやラジオボタンの色を変更 アスペクト比を指定する 新しいメディアクエリーの範囲指定方法 背面の要素をぼかす 要素を画面のど真ん中に固定表示 空の要素にスタイルをあてる 条件に合致しないセレクターにスタイルをあてる スムーススクロールのジャンプ位置 動いているCSSアニメーションを止める HTML・CSSの全コードは各サンプルの「HTML」や「CSS」タブを、別タブでのサンプル表示は右上の「EDIT ON CODEPEN」をクリックしてご覧ください！ 1. ネストで親子セレクタ
一行追加でコンタクトフォームを実装できる【Formspree】
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
WordPressの記事をMarkdown形式に一括出力する方法
2023年6月27日 Webサイト制作, Wordpress WordPressで運営していた記事をJAMStackサイトに移行したり、GitHubで管理したいというとき、記事数が少なければチマチマ手作業でも問題なさそうですが、数十、数百の記事を手作業するのはさすがにしんどいですよね。今回はたまりにたまったWordPressの記事をMarkdown形式に一括で変更、ダウンロードする方法を紹介します。 ↑私が10年以上利用している会計ソフト！ 1. WordPressの記事をエクスポート WordPress管理画面の「ツール」→「エクスポート」から書き出したいコンテンツを選びます。画像や本文データすべて利用する場合は「すべてのコンテンツ」を選んで「エクスポートファイルをダウンロード」ボタンをクリック。XML形式のファイルがダウンロードされます。 エクスポートしたデータは、ひとまずわかりやすい
非デザイナーがFigmaでデザインの確認時に抑えておきたいポイント
2023年6月20日 Figma, Webデザイン, 便利ツール 人気ですよね、Figma。デザイナーではないけど、デザインのレビューをする立場の人も、この頃何かと話題のFigmaが気になっているのではないでしょうか。今回はデザイナーからFigmaのファイルが共有されたけど、何をすればわからない！という人向けに、デザインのレビュー時にこれだけは抑えておきたいというFigmaの設定の流れや機能を紹介します。 ↑私が10年以上利用している会計ソフト！ Figmaを使うメリット Figmaは世界的にも大人気の、無料で使えるデザインツールです。人気の理由は、主に以下のような共同作業のしやすさがあげられます： インストールする必要がない コメントの共有がしやすい バージョン管理ができる デザイナーであれば自分の持っているPCやMacにFigmaのアプリをインストールして利用したほうが使いやすいかな、
カフェのWebサイトを作る時のポイントや実例
2023年5月18日 Webデザイン, インスピレーション おしゃれだったり、かわいかったり、落ち着く雰囲気だったりと、一口にカフェといっても様々なコンセプトがありますよね。そんなカフェのWebサイトをあれこれ見て気づいた点や、カフェの雰囲気を反映させたWebサイトの実例を紹介します。 ↑私が10年以上利用している会計ソフト！ カフェのWebサイトをデザインする時のポイント さまざまなカフェのWebサイトを調査しながら感じた共通点や、制作時のポイントなどを見ていきましょう。 店内の様子を大きく見せる カフェは店内の雰囲気を重視している場合が多く、それをどうWebサイト上で表現するかが重要です。画面いっぱいに広がる大きな画像や動画で視覚的にアピールしましょう。可能であればお客さんがいる状態での写真も掲載し、どのような客層が多く利用しているのか、座ったときの客同士のスペースなども見せられるとい
プレゼンの内容もスライドもCanvaのAI機能で作ってみた
2023年3月27日 便利ツール Canvaは、用意された多数のテンプレートから、オンライン上で簡単にグラフィックデザインができるツールです。無料でも利用可能ですよ！そのCanvaにAIであれこれ便利に作れちゃう機能が追加されたと耳にしたので、さっそく使ってみました！ ↑私が10年以上利用している会計ソフト！ 文章を考えてもらえる！ Canvaのアカウントを作成し、ログインすると、作成したいコンテンツのジャンルを選べるようになっています。文章を作りたいので、「Docs」から「Docs to Decks」を選択しましょう。 こんな感じのデフォルトの文章が用意されています。画面上部のオプションバーから書式の選択ができますし、慣れている人はマークダウン形式でサクサク書き進められますよ。 ひとまず拙著『1冊ですべて身につくJavaScript入門講座』の文章をコピペして挿入してみました。 さて、こ
AIでオリジナルのカラーパレットを作成する【ColorMagic】
2023年1月29日 便利ツール, 色彩 配色ってなかなか思った通りのイメージにならず、難しいと感じる方も多いでしょう。そこで今回は、AIでオリジナルのカラーパレットをつくれるサービスColorMagicを紹介します。キーワードからかんたんに配色を生成してくれますよ！ ↑私が10年以上利用している会計ソフト！ ColorMagicを使ってみた ColorMagicのWebサイトの「パレットをつくる」ボタンから始めましょう。日本語で利用できるのが嬉しいですね！入力欄に作成したいイメージを入力します。ここではヨガと入力してみました。「生成する」ボタンをクリック。 いい感じに配色が提案されました！「同じワードで再生成」ボタンから別の配色を提案してもらえます。ただしアカウントを作成しない場合は3回まで。色の調整や保存もアカウント登録が必要です。 アカウントを作成すると、毎日10回まで無料で配色の生
懐かしのmarquee？テキストを自動スクロールさせる方法と実装例
2023年1月18日 CSS, JavaScript, Webサイト制作, Webデザイン 最近のWebサイトギャラリー見てたら、懐かしい動きを目にする機会が増えてきました。テキストが右から左に自動スクロールするという、かつての「marquee」タグを彷彿させる動きです。今回はこの自動スクロールテキストに注目してみます。 marquee とは かつては marquee というタグが使われ、このタグで囲んだテキストが自動的に右から左に移動しました。現在でもこのタグはChromeをはじめとするブラウザーで実行できますが、すでに非推奨となっています。 このテキストの自動スクロール、少し前からまたちょこちょこ見かけるようになりました。かつては少ないスペースに多くの情報を表示するために使われていたのかなと思いますが、現代ではどちらかというと装飾目的のようです。一部のコンテンツを動かすことで、画面にア
商用利用OK！2022年にリリースされた無料フォント40
2022年12月19日 フォント 2022年もあとわずか！今年も数多くの素敵フォントがリリースされました！この一年を振り返って、「これは！」と思ったフォントをいくつか紹介します。どれも無料でダウンロードでき、商用利用可能なものです。みなさんのお気に入りが見つかると幸いです。 ↑私が10年以上利用している会計ソフト！ 過去の年末フォント紹介記事 2021年にリリースされた無料フォント40 2020年にリリースされた無料フォント40 2019年にリリースされた無料フォント30 2018年にリリースされた無料フォント40 2017年にリリースされた無料フォント40 2016年にリリースされた無料フォント30 2015年にリリースされた無料フォント35 日本語フォント 瞬きノ明朝 文字がギザギザに揺れているインパクトのあるフォント。収録文字数は文字数は8000字以上！ つなぎゴシック Zen角ゴシ
prefers-reduced-motionでアニメーション（視差効果）を減らす設定をしたデバイスに対応させる
2023年2月7日 CSS, アクセシビリティ アニメーションのあるWebページって、見るのも作るのも好きなんですが、みなさんはいかがでしょう？中には動きが苦手で目が疲れてしまう、画面酔いしてしまう…なんていう方もいらっしゃるかと思います。今回はアニメーションが苦手な方のためにWebサイト側でできることを考えてみます。 ↑私が10年以上利用している会計ソフト！ アニメーションを減らす設定 アニメーションによって画面酔いしてしまったり、動きがつくと内容が理解できなくなるという方は、OS側で視覚効果を減らす設定をしているかと思います。そういった設定をしている場合は、CSSでWebサイトのアニメーションもなくす、あるいは軽減させる指定が可能です。 設定方法 まずはアニメーションを減らすためのOS側の設定方法から紹介します。 Windows 10: 設定 → 簡単操作 → ディスプレイ → アニメ
ダークモード時の画像の扱い方
2023年2月7日 CSS, Webサイト制作 以前から個人的にダークモードの対応を推奨しています。基本の書き方は過去記事「Webサイトをダークモードに対応させよう」を読んでもらうとして、今回は画像まわりのダークモード実装方法を中心に紹介します！ ↑私が10年以上利用している会計ソフト！ 画像の明度や彩度を落とす 明るい背景色の場合、画像は鮮やかで明るい色合いが目に止まりやすいですよね。しかしダークモードでは、まわりが暗くなるので画像だけ派手に眩しく見えてしまいます。そこで、CSSの filter を使って、ダークモードのときは明度や彩度を調整するといいでしょう。 実装するには filter プロパティーに、明度は brightness() 、彩度は saturate() を指定します。カッコの中にパーセントで割合を書けば完了。明度・彩度両方指定するなら以下のように値を続けて書きます。 @
CSSで画像をハーフトーン（網点）に加工する
2022年10月19日 CSS 画像の中の色や明るさの濃淡を、様々な大きさのドットで表現するハーフトーン。日本語では網点とも言うようです。どこかレトロで、アメコミタッチなこのハーフトーンを、CSSで表現してみます！ ↑私が10年以上利用している会計ソフト！ グラフィックツールを使わず、CSSだけでひとつの画像をこんな感じに加工してみます。 1. 画像をdivに入れておく まずは下準備。「halftone」というクラス名をつけた div に画像を入れておきます。今回は猫ちゃんの画像を用意しました。 HTML <div class="halftone"> <img src="cat.jpg" alt=""> </div> 2. CSSで水玉模様を作成 「halftone」クラスに ::after で疑似要素を作成。 position を使って猫ちゃん画像の上に重ねます。水玉模様は円形グラデーシ
DeepL翻訳で海外のWebサイト制作情報を読みあさろう！
2023年2月7日 便利ツール, 海外情報, 英語 DeepL（ディープエル）翻訳は、ドイツの企業が開発している機械翻訳エンジン。自然で高い品質の翻訳文が話題となっています。今回はそのDeepL翻訳を、Webデザインや制作、技術系の分野で活用していく方法を紹介します！ ↑私が10年以上利用している会計ソフト！ DeepL翻訳の使い方 DeepL翻訳の翻訳精度の高さは一度使ってみると実感できるかと思います。基本的にはDeepLのWebサイトにアクセスして、翻訳したい文章をコピペするだけ。ただ、毎回DeepL翻訳のWebサイトに文章をコピペするのって地味に面倒ですよね…。 そこでおすすめなのがDeepL翻訳のChrome拡張です。インストールしてWebサイト内の文章を選択すると、カーソル付近にDeepLマークが表示され、クリックすれば翻訳されます。 技術系ドキュメント特有の用語やコードを含んで
モバイル幅で作成されたWebサイトの特徴と作例
2022年7月20日 CSS, Webデザイン, スマートフォン モバイルは幅が狭く、デスクトップは幅が広いので、それぞれのデバイスにあわせてWebサイトの幅も可変させたりしますよね。しかし最近、デスクトップで見てもモバイル幅のまま表示させている国内のWebサイトをちょこちょこ見かけます。今回はそんなモバイル幅のWebサイトを見ていこうと思います。 ↑私が10年以上利用している会計ソフト！ モバイル幅Webサイトの特徴 デスクトップで見ても狭いコンテンツの幅 よくあるWebサイトでは、コンテンツ部分の枠がデバイスの幅によって変化します。例えばモバイルサイズでは幅が狭くなり、デスクトップサイズでは幅が広がって画面中央に表示されます。このブログでもそうですよね。しかし、昨今見られるようになったレイアウトでは、デスクトップサイズで見てもコンテンツ枠の幅は狭いままで表示されています。画面中央に表示
WordPressをヘッドレスCMSにしてNext.jsでブログを作成する方法とエラー対処法
2022年12月24日 JavaScript, React, Wordpress 最近はReactをベースにしたフレームワーク、Next.jsをいじっております。今回はWordPressに登録した投稿をNext.jsで表示させてみようと思います！ ↑私が10年以上利用している会計ソフト！ ヘッドレスCMSとは？ ヘッドレスCMSはコンテンツの管理のみをするCMS（＝Content Management System）のこと。例えばWordPressではコンテンツの作成から表示までを行えますが、ヘッドレスCMSではコンテンツの表示は別の方法で行います。ここではNext.jsを使ってみます。 ヘッドレスCMSを使うメリット 表示部分を別途用意することになんのメリットがあるのでしょうか？ざっくりと以下の3点が挙げられるかなと思います： 表示速度の改善 セキュリティの向上 管理しやすい 通常のWo
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
