MENU
  • Home
  • My Blog
  • Community

rislabo Web Design Blog

  • Home
  • My Blog
  • Community
  • Figma

    Figmaについて初心者にもわかりやすく徹底解説!

    2024年5月7日
  • Photoshop

    初心者必見!Photoshopでできること

    2024年5月13日
  • デザイン

    まずはここから始めよう!「Illustratorについて」

    2024年5月13日
  • HTML&CSS

    HTMLタグについて初心者向けに徹底解説!

    2024年5月17日
スクロールできます
  • Photoshop
    Photoshopのブラシファイルを読み込む方法
    2025年6月20日
  • Illustrator
    「シンボルツール」使い方と種類について
    2024年11月29日
  • デザイン
    まずはここから始めよう!「Illustratorについて」
    2024年5月13日
  • Photoshop
    Photoshopのブラシファイルを読み込む方法
    2025年6月20日
  • Photoshop

    Photoshopのブラシファイルを読み込む方法

    2025年6月20日
  • Illustrator

    「シンボルツール」使い方と種類について

    2024年11月29日
  • Illustrator

    最強タッグ!IllustratorとPhotoshopの連携

    2024年11月28日
  • Illustrator

    自由自在!「パス上文字ツール」の使い方

    2024年11月27日
  • その他

    サイズ違いも自由自在!バナーのバリエーション作成

    2024年11月26日
  • その他

    Zoomをもっと使いこなす!便利機能について

    2024年11月24日
              もっとみる             
 もっと見る
  • Photoshop

    Photoshopのブラシファイルを読み込む方法

    2025年6月20日
  • Illustrator

    「シンボルツール」使い方と種類について

    2024年11月29日
  • Illustrator

    最強タッグ!IllustratorとPhotoshopの連携

    2024年11月28日
  • Illustrator

    自由自在!「パス上文字ツール」の使い方

    2024年11月27日
  • その他

    サイズ違いも自由自在!バナーのバリエーション作成

    2024年11月26日
  • その他

    Zoomをもっと使いこなす!便利機能について

    2024年11月24日
  • Photoshop

    Photoshop「整列」「均等配置」を使いこなす方法

    2024年11月24日
  • Photoshop

    Photoshopで人物写真をレタッチ(補正)する方法

    2024年11月24日
  • その他

    クラウド保存はこれで完璧!丸わかりガイド

    2024年11月23日
              もっとみる             
 もっと見る
  • JavaScript

    【実装編】jQueryでスライダーを作ってみよう

    2024年10月30日
  • JavaScript

    【実践編】JavaScriptでハンバーガーメニューを作ろう

    2024年10月28日
  • HTML&CSS

    保護中: \超有料級/ボタンやあしらいのCSSカスタマイズ手順徹底解説!

    2024年10月28日
              もっとみる             
 もっと見る
  • Photoshop

    Photoshopで人物写真をレタッチ(補正)する方法

    2024年11月24日
  • プログラミング

    知らなきゃやばい Webデザイナーに必要なコーディング知識5選

    2024年8月31日
  • フリーランス

    初心者でも安心!Chatworkの使い方や魅力を徹底解剖

    2024年8月24日
              もっとみる             
 もっと見る

記事が見つかりませんでした。

もっとみる
関口 愛里
株式会社iris代表取締役
■Web制作会社を経営
■女性の自立をサポートするWebデザインスクール運営
■現在250名超えの女性限定のWebデザインチームを運営
■Webデザイナーを目指したい方に向けてWebデザイナーになるために必要な勉強方法〜現場のリアルを発信していきます。
instagram
あいり|ママWebデザイナーを育成するプロ

aichan_webdesign

誰でも分かるWebデザインの知識をInstagramでも毎日配信中↓ デザイン、コーディング、Webデザイナーに必要な知識etc

@aichan_webdesign ←
これは凄い!簡単お洒落な縁取り加工
をIllustratorで作成しよう!
⁡
1. 背景が透過された画像を用意する
2. 長方形ツールで作業用の背景を作成する
3. 画像をコピーし、前面に複製する
4. 「画像トレース」パネルを開く
5. 画像トレースパネル内で各種設定をする
6. 「オブジェクト」→「パス」→
 「パスのオフセット」を選択
7. パスのオフセットパネルで各種設定をする
8. シルエット画像を選択した状態で
 「ウィンドウ」→「スウォッチ」
9. スウォッチパネルで
 シルエットを好きな色に変更する
10.レイヤーパネル上でシルエット画像を
 複製元の画像の下へ移動させる
11. 「効果」→「スタイライズ」→
 「ドロップシャドウ」を選択
12.ドロップシャドウパネルで
 各種数値の設定をする
13. お洒落な縁取り加工の完成
⁡
この投稿を保存して、何度も見返せるようにしてね✨
⁡
-—————————————
お役立ち情報を発信するので
フォローしてね♡ 
" @aichan_webdesign "
⁡
⁡
ーお知らせー
■女性限定Webデザイン無料コミュニティ
リニューアルしました!
すでに300名を突破
⁡
・初心者デザイナーから駆け出しデザイナーまで在籍
・勉強会やオンライン懇親会を月1.2回で開いてます
・コンペや案件募集、チャレンジ企画なども開催
⁡
興味ある方はプロフかハイライト固定ポストをチェックしてね✨
⁡
⁡
■Webデザインスクール
リスラボ運営・代表
デザイン〜コーディング、営業まで現場に必要なスキルが一貫して習得出来る
⁡
女性の自立をサポートし輝けるママを増やしていくために活動
⁡
⁡
■株式会社iris(Web制作会社)代表取締役
<サービス内容>
・ホームページ、LP制作
(デザイン〜コーディング)、Webサイト全般、システム開発
・印刷物(名刺、チラシ、パンフレット、
メニュー、ポスター等)
・SNS運用代行
・UTAGE構築代行
・LINE構築代行
⁡
お問い合わせはDMからお願いします📩
-—————————————
⁡
#Adobe
#AdobeIllustrator
#Illustrator
#webデザイン 
#webデザイナー
@aichan_webdesign ←
一瞬でクリスマス風に!
ブラシツールで簡単キラキラ加工
をPhotoshopで作成しよう!
⁡
1. キラキラさせたい画像を準備する
2. 新規レイヤーを追加する
3. ブラシプリセットピッカーを開き
 「星形(70pixel)」を選択する
4. ブラシの設定をする-part1
 (★を不揃いな並びにしていく)する
5. ブラシの設定をする-part2
 (「シェイプ」「散布」の設定)調整
6. 描画色を「白」に設定し
 画像の上にキラキラをのせる
7. キラキラに加工した画像の完成
⁡
この投稿を保存して、何度も見返せるようにしてね✨
⁡
——————————————————————
⁡
お役立ち情報を発信するので
フォローしてね♡ 
" @aichan_webdesign "
⁡
⁡
ーお知らせー
■女性限定Webデザイン無料コミュニティ
リニューアルしました!
すでに300名を突破
⁡
・初心者デザイナーから駆け出しデザイナーまで在籍
・勉強会やオンライン懇親会を月1.2回で開いてます
・コンペや案件募集、チャレンジ企画なども開催
⁡
興味ある方はプロフかハイライト固定ポストをチェックしてね✨
⁡
⁡
■Webデザインスクール
リスラボ運営・代表
デザイン〜コーディング、営業まで現場に必要なスキルが一貫して習得出来る
⁡
女性の自立をサポートし輝けるママを増やしていくために活動
⁡
⁡
■株式会社iris(Web制作会社)代表取締役
<サービス内容>
・ホームページ、LP制作
(デザイン〜コーディング)、Webサイト全般、システム開発
・印刷物(名刺、チラシ、パンフレット、
メニュー、ポスター等)
・SNS運用代行
・UTAGE構築代行
・LINE構築代行
⁡
お問い合わせはDMからお願いします📩
⁡
#Adobe
#AdobePhotoshop
#Photoshop
#webデザイン 
#webデザイナー
あなたは言語化が「得意」か「苦手」か教えてねー!

⁡
ワイヤーフレームの前に絶対やるべきことは…

 “目的の言語化”です。
これをやらないと、
 どれだけ上手に作ってもズレたLP・サイト”になります!

やることはたった3つ👇
①誰に(ターゲット)
 例)副業したい30代ママ、初心者Webデザイナーなど。
②何をさせたい(ゴール)
 例)LINE登録、問い合わせ、購入、説明会予約。
なぜ必要なのか(課題)
 例)時間がない/続かない/何を選べばいいかわからない。

この3つが決まれば、
 ワイヤーフレームは“自動的に正しい形”になります。
⁡
⁡
-—————————————
お役立ち情報を発信するので
フォローしてね♡ 
" @aichan_webdesign "
⁡
⁡
ーお知らせー
■女性限定Webデザイン無料コミュニティ
リニューアルしました!
すでに300名を突破

・初心者デザイナーから駆け出しデザイナーまで在籍
・勉強会やオンライン懇親会を月1.2回で開いてます
・コンペや案件募集、チャレンジ企画なども開催

興味ある方はプロフかハイライト固定ポストをチェックしてね✨⁡
⁡
⁡
■Webデザインスクール
リスラボ運営・代表
デザイン〜コーディング、営業まで現場に必要なスキルが一貫して習得出来る

女性の自立をサポートし輝けるママを増やしていくために活動
⁡
⁡
■株式会社iris(Web制作会社)代表取締役
<サービス内容>
・ホームページ、LP制作
(デザイン〜コーディング)、Webサイト全般、システム開発
・印刷物(名刺、チラシ、パンフレット、
メニュー、ポスター等)
・SNS運用代行
・UTAGE構築代行
⁡・LINE構築代行

お問い合わせはDMからお願いします📩
-—————————————
⁡
#webデザイン 
#webデザイナー
@aichan_webdesign ←
簡単面白い!文字に疾走感を与える加工
をIllustratorで作成しよう!
⁡
1. 好きな文字を打ち込む
2. アウトラインを作成する
3.「変形 詳細オプション」を開く
4.「変形 詳細オプション」内の
 シアーの数値を調整する
5. 長方形ツールで横長の長方形を作成する
6. 「アンカーの削除ツール」で
 長方形を三角形に変形させる
7. 三角形を複製し文字にくっつけていく
8. 疾走しているような文字の完成
⁡
この投稿を保存して、何度も見返せるようにしてね✨
⁡
-—————————————
お役立ち情報を発信するので
フォローしてね♡ 
" @aichan_webdesign "
⁡
⁡
ーお知らせー
■女性限定Webデザイン無料コミュニティ
リニューアルしました!
すでに300名を突破
⁡
・初心者デザイナーから駆け出しデザイナーまで在籍
・勉強会やオンライン懇親会を月1.2回で開いてます
・コンペや案件募集、チャレンジ企画なども開催
⁡
興味ある方はプロフかハイライト固定ポストをチェックしてね✨
⁡
⁡
■Webデザインスクール
リスラボ運営・代表
デザイン〜コーディング、営業まで現場に必要なスキルが一貫して習得出来る
⁡
女性の自立をサポートし輝けるママを増やしていくために活動
⁡
⁡
■株式会社iris(Web制作会社)代表取締役
<サービス内容>
・ホームページ、LP制作
(デザイン〜コーディング)、Webサイト全般、システム開発
・印刷物(名刺、チラシ、パンフレット、
メニュー、ポスター等)
・SNS運用代行
・UTAGE構築代行
・LINE構築代行
⁡
お問い合わせはDMからお願いします📩
-—————————————
⁡
#Adobe
#AdobeIllustrator
#Illustrator
#webデザイン 
#webデザイナー
@aichan_webdesign ←
簡単便利!逆光の被写体を見やすく調整
をPhotoshopで作成しよう!
⁡
1. 画像を用意する
2. 画像をスマートオブジェクトに変換する
3. 「イメージ」→「色調補正」→
 「シャドウ・ハイライト」を選択
4. 「詳細オプションを表示」をチェックする
5. シャドウ・ハイライトパネルで
 各種数値を調整
6. コンテキストタスクバーから
 「被写体を選択」を選択
7. メニューバー→「選択範囲」→
 「選択範囲を反転」を選択
8. 「スマートフィルターマスク
 サムネイル」を選択する
9. 「塗りつぶしツール」を選択し
 描画色を黒色に設定する
10. 画像をクリックして選択範囲を塗りつぶす
11. 逆光の被写体を見やすく調整した画像の完成
⁡
この投稿を保存して、何度も見返せるようにしてね✨
⁡
——————————————————————
⁡
お役立ち情報を発信するので
フォローしてね♡ 
" @aichan_webdesign "
⁡
⁡
ーお知らせー
■女性限定Webデザイン無料コミュニティ
リニューアルしました!
すでに300名を突破
⁡
・初心者デザイナーから駆け出しデザイナーまで在籍
・勉強会やオンライン懇親会を月1.2回で開いてます
・コンペや案件募集、チャレンジ企画なども開催
⁡
興味ある方はプロフかハイライト固定ポストをチェックしてね✨
⁡
⁡
■Webデザインスクール
リスラボ運営・代表
デザイン〜コーディング、営業まで現場に必要なスキルが一貫して習得出来る
⁡
女性の自立をサポートし輝けるママを増やしていくために活動
⁡
⁡
■株式会社iris(Web制作会社)代表取締役
<サービス内容>
・ホームページ、LP制作
(デザイン〜コーディング)、Webサイト全般、システム開発
・印刷物(名刺、チラシ、パンフレット、
メニュー、ポスター等)
・SNS運用代行
・UTAGE構築代行
・LINE構築代行
⁡
お問い合わせはDMからお願いします📩
⁡
#Adobe
#AdobePhotoshop
#Photoshop
#webデザイン 
#webデザイナー
@aichan_webdesign←AIうさんくさいって思ってる人損してる

AIはWebデザイナーの仕事を奪う

なんかうさんくさい

そう思ってる方は損します!

AIは正しい使い方をすれば
私たちの強い味方になるので最後まで見て
使いこなしてね✨
⁡

-—————————————
お役立ち情報を発信するので
フォローしてね♡ 
" @aichan_webdesign "
⁡
⁡
ーお知らせー
■女性限定Webデザイン無料コミュニティ
リニューアルしました!
すでに300名を突破

・初心者デザイナーから駆け出しデザイナーまで在籍
・勉強会やオンライン懇親会を月1.2回で開いてます
・コンペや案件募集、チャレンジ企画なども開催

興味ある方はプロフかハイライト固定ポストをチェックしてね✨⁡
⁡
⁡
■Webデザインスクール
リスラボ運営・代表
デザイン〜コーディング、営業まで現場に必要なスキルが一貫して習得出来る

女性の自立をサポートし輝けるママを増やしていくために活動
⁡
⁡
■株式会社iris(Web制作会社)代表取締役
<サービス内容>
・ホームページ、LP制作
(デザイン〜コーディング)、Webサイト全般、システム開発
・印刷物(名刺、チラシ、パンフレット、
メニュー、ポスター等)
・SNS運用代行
・UTAGE構築代行
⁡・LINE構築代行

お問い合わせはDMからお願いします📩
-—————————————
⁡
#webデザイン 
#webデザイナー
@aichan_webdesign ←
とってもお洒落!すりガラス風背景の作り方
をIllustratorで作成しよう!
⁡
① 背景画像を用意し同じ位置に
 コピー&ペーストする
② コピー&ペーストした画像に
 「ぼかし(ガウス)」を適用
③ 画像の上に長方形を作成する
④ 作成した長方形をコピーする
⑤ ぼかした画像と長方形を
 クリッピングマスクする
⑥ 長方形をペーストし不透明度を調整する
⑦ 背景をすりガラス風にした画像の完成
⁡
この投稿を保存して、何度も見返せるようにしてね✨
⁡
-—————————————
お役立ち情報を発信するので
フォローしてね♡ 
" @aichan_webdesign "
⁡
⁡
ーお知らせー
■女性限定Webデザイン無料コミュニティ
リニューアルしました!
すでに300名を突破
⁡
・初心者デザイナーから駆け出しデザイナーまで在籍
・勉強会やオンライン懇親会を月1.2回で開いてます
・コンペや案件募集、チャレンジ企画なども開催
⁡
興味ある方はプロフかハイライト固定ポストをチェックしてね✨
⁡
⁡
■Webデザインスクール
リスラボ運営・代表
デザイン〜コーディング、営業まで現場に必要なスキルが一貫して習得出来る
⁡
女性の自立をサポートし輝けるママを増やしていくために活動
⁡
⁡
■株式会社iris(Web制作会社)代表取締役
<サービス内容>
・ホームページ、LP制作
(デザイン〜コーディング)、Webサイト全般、システム開発
・印刷物(名刺、チラシ、パンフレット、
メニュー、ポスター等)
・SNS運用代行
・UTAGE構築代行
・LINE構築代行
⁡
お問い合わせはDMからお願いします📩
-—————————————
⁡
#Adobe
#AdobeIllustrator
#Illustrator
#webデザイン 
#webデザイナー
@aichan_webdesign ←
これは面白い!画像で文字を挟み込む加工
をPhotoshopで作成しよう!
⁡
① 画像を用意して被写体を選択する
② 範囲が選択されたレイヤーを複製する
③ 最初に配置した画像を非表示にする選択
④ 画像の上半分を選択し
 レイヤーマスクを追加する
⑤ 工程04のレイヤーを複製し
 レイヤーマスクを反転する
⑥ 画像上部を上方向へ移動させ文字を挟む
⑦ 文字を挟んだ画像の完成
⁡
この投稿を保存して、何度も見返せるようにしてね✨
⁡
——————————————————————
⁡
お役立ち情報を発信するので
フォローしてね♡ 
" @aichan_webdesign "
⁡
⁡
ーお知らせー
■女性限定Webデザイン無料コミュニティ
リニューアルしました!
すでに300名を突破
⁡
・初心者デザイナーから駆け出しデザイナーまで在籍
・勉強会やオンライン懇親会を月1.2回で開いてます
・コンペや案件募集、チャレンジ企画なども開催
⁡
興味ある方はプロフかハイライト固定ポストをチェックしてね✨
⁡
⁡
■Webデザインスクール
リスラボ運営・代表
デザイン〜コーディング、営業まで現場に必要なスキルが一貫して習得出来る
⁡
女性の自立をサポートし輝けるママを増やしていくために活動
⁡
⁡
■株式会社iris(Web制作会社)代表取締役
<サービス内容>
・ホームページ、LP制作
(デザイン〜コーディング)、Webサイト全般、システム開発
・印刷物(名刺、チラシ、パンフレット、
メニュー、ポスター等)
・SNS運用代行
・UTAGE構築代行
・LINE構築代行
⁡
お問い合わせはDMからお願いします📩
⁡
#Adobe
#AdobePhotoshop
#Photoshop
#webデザイン 
#webデザイナー
@aichan_webdesign ←クリスマスバナーコンペ受賞者発表🎅🎄

リスコミュ限定で行ったバナーコンペの
受賞者発表です🎉

参加してくれた方の作品(1部)も載ってるので
ぜひ、見てあなたはどれが好みか考えてみてね✨

-————————
■女性限定Webデザイン無料コミュニティ
リニューアルしました!
すでに330名を突破

・初心者デザイナーから駆け出しデザイナーまで在籍
・勉強会やオンライン懇親会を月1.2回で開いてます
・コンペや案件募集、チャレンジ企画なども開催
-————————
#Webデザイン
#webデザイナー
Instagram でフォロー
カテゴリ一覧
  • デザイン (107)
    • Figma (24)
    • Illustrator (34)
    • Photoshop (28)
    • その他 (7)
  • フリーランス (9)
  • プログラミング (55)
    • HTML&CSS (27)
    • JavaScript (7)
    • Sass (2)
    • WordPress (4)
    • その他 (9)
    • 環境構築 (5)
  • 未分類 (6)
タグ一覧
adobe Figma Google Chrome HTML&CSS Illustrator JavaScript Photoshop Sass VS Code Webデザイナー Webデザイン Web制作 WordPress コーディング デザイン基礎 バナー フォント フリーランス フリー素材 ポートフォリオ 制作実績
  • Home
  • プライバシーポリシー

© 2024 iris inc.