2ページ目LINK - Smile Web Lesson

2025.05.20

手書き風文字を自分で作る方法

■手書き風文字を自分で作る方法
自分で描いた文字をイラストレーターでパス化してWEBデザインの素材となる方法です。

（１）白いノートに、ネームペンで「Campaign」と書く
（２）スマホで撮影する
（３）撮った写真をAirDropなどで、自分のPCに送る
（４）イラストレーターで画像を開く
（５）画像選択→上のコントロールバーから「画像をトレース」をクリック（無い場合はウィンドウ→コントロールで表示）
（６）「拡張」をクリックで文字にパスができる

2025.05.20

うるおい玉・ジェル玉・流体シェイプの作り方

美容LPなどでよく見かけるうるおい玉（ぷかぷか浮いた球体の中に文字）のイラストレータでの作り方の参考URLです。
作るの面倒な方は、illustACなどのフリー素材サイトからも検索で「うるおい玉」などで検索すると素材がダウンロードできます。※使用する際はサイトの注意事項を確認しましょう。

■印刷の現場から
イラレの小技✨膨張ツール＋スムーズツールで“流体シェイプ”を作ろう！2022.12.12
（引用元：https://www.wave-inc.co.jp/weblog/?p=24839）

#うねり玉
#円
#球体
#流体シェイプ

2025.05.20

Google Fonts の使い方

Google Fonts をダウンロードして自分のPCにインストールして、イラレやフォトショップでも使用してみましょう、

■Google Fontsをダウンロードして、PCで使う方法
（１）「Google Fonts」へアクセス
（２）使用したいフォントを検索（例：ここでは SmoothSans を検索）
（３）「Get font」ボタンをタップ
（４）ダウンロードしたzipファイルを押してインストール

■Google Fonts（引用元：https://fonts.google.com/）

2025.05.20

配色ツール　ー配色のルールー

配色ツールの参考サイトです。
カラーパレットジェネレーターでカラーホイールなど、直感的にも色を選定することが可能。
サイトやバナーを新規デザインをする際、まずは「配色比率」を決めましょう。

Color Supply（引用元：https://old.colorsupplyyy.com/app）

Adobe Color（引用元：https://color.adobe.com/ja/）

■配色比率の法則「70:25:5」
ベースカラー(70%)、メインカラー(25%)、アクセントカラー(5%)を選定します。
バランスとの取れた配色になる
大体３色程、多くても４色位まで

■悪いバナーとは
可読性が悪い
色数が多い
バナー素材（商材）との相性が悪い
ターゲットと合っていない
デザイン4原則にそもそも当てはまっていない
デザイン4原則とは
・整列
・近接
・反復
・コントラスト
なぜ、その配色にしたのか答えられない…等

2025.03.25

AIで「手書き文字」を生成できる無料サービス「Calligrapher.ai」

直感で「手書き文字」を作成できる無料サービス
右上バーのstyleからフォントスタイルを変更できる
「-」を何度もクリックすることで、より自分のイメージに近い手書き文字を作成することができる

■「Calligrapher.ai」
https://www.calligrapher.ai/

2025.02.25

Git／GitHubとは？

Gitは「共有でコードを管理できるシステム」です。複数でコードを管理する場合、先祖帰りやデータの差分など無いように管理できます。
GitHubは、さらにGitで管理したものを「ネット上に管理したコードを保存をしたり、チーム皆んなで共有作業するためのオンライン（プラットフォーム）サービス」です。「バージョン管理システム」とも呼ばれます。

具体的には、以下のような使い方ができます：

■コードの保存と管理
自分が作ったウェブサイトのHTMLやCSS、JavaScriptなどのコードをGitHubに保存できます。これにより、コードを失う心配がなくなり、どの時点でも過去のバージョンに戻すことができます。

■チームでの協力作業
他のデザイナーや開発者と一緒にプロジェクトを進めるとき、GitHubを使ってファイルを共有したり、お互いの変更内容を確認しながら作業することができます。

■自分の作品を公開
作ったウェブサイトをGitHubにアップロードして、ポートフォリオとして他の人に見てもらうことができます。GitHub Pagesという機能を使えば、コードを公開するだけで簡単にWebサイトとして表示できます。

簡単にまとめると、GitHubは「コードを共有保存」「チームで作業」「作品を公開」するために使う便利なツールです。Webデザイナーとしても、コードやデザインの管理に役立ちますよ！

参考URL:GitHubの使い方を画像つきで徹底解説！初心者でもすぐ使える
2025年2月4日：侍エンジニアブログ

2025.01.06

動画圧縮サービス

動画が重い場合、圧縮することで背景などに使用も可能です。
できれば、Youtubeなどの動画プラットフォームにアップして設置するのが理想です。

ただ、どうしてもvideoのタグなどで埋め込みたい場合は下記などのサービスを利用して軽量化しましょう。
■VideoSmaller は動画のファイルサイズを小さくする無料オンラインサービス　参考URL
https://www.videosmaller.com/jp/

■動画容量を小さくしたい！Windows・Mac・スマホで使える圧縮ツール16選
※参考URL　LetroStudi　2023.07.12
https://service.aainc.co.jp/product/letrostudio/article/16-compression-tools

ちなみに、mp4に変換したい場合は、「動画をMP4に変換｜Adobe Express」がおすすめです。

2024.11.29

無料ホームページ制作ツール・ノーコードWeb制作とは

■「Studio」
https://studio.design/ja

「Studio」は、コードを書けなくてもWebサイトの構築・公開・運用ができる、無料版もあるノーコードWeb制作プラットフォームです。
Web上で操作することが可能なので、インターネットの環境がある場所であれば、PCでいつでもどこでも操作が可能です。
コーディングの知識がなくても作れるものまでさまざまなので、ノンデザイナーには向いています。

最近はこのような、htmlやcssが書けなくても、Webサイトを構築してくれるサービスが増えていて、コードを書かなくて良いことから、「ノーコードツール」と呼ばれています。デザインやテンプレートも豊富で、そこから選んだものを自分でカスタマイズして、Webサイトを公開するといったものです。

ノーコードツールの代表として、　「Studio」以外にも「Wix」や「Canva」、「Jimdo」などがそれにあたります。
■「Jimdo」
https://www.jimdo.com/jp/

■「Wix」
https://ja.wix.com/

■「Canva」
https://www.canva.com/

ただし、Webデザイナーとして活動していくには、基本のhtmlやCSSはもちろん必須なので、きちんと学ぶ必要があります。