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←あなたは何問分かるか @aichan_webdesign←あなたは何問分かるかな?

Webデザイナーなら知らなきゃやばい
デザイン常識クイズ!!-著作権編-

もし、答えられない問題があったら
今回でしっかり覚えてね✨
-—————————————
AIRI SEKIGUCHI
⁡
お役立ち情報を発信するので
フォローしてね♡ 
" @aichan_webdesign "
⁡
⁡
ーお知らせー
■女性限定Webデザイン無料コミュニティ
リニューアルしました!
すでに200名を突破

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

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

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

お問い合わせはDMからお願いします📩
⁡
⁡
-—————————————
⁡
#webデザイン 
#webデザイナー
💡 超便利!ハイライト入り文字の作 💡 超便利!ハイライト入り文字の作り方
をIllustratorで作成しよう!
⁡
① テキストを準備する
② 「パスファインダー」で
 「複合シェイプを作成」を選択
③ 「新規塗りを追加」し
 「パスのオフセット」を設定する
④ 「新規効果を追加」し「変形」で数値を調整する
⑤ 「背面オブジェクトで型抜き」を選択
⑥ 「アピアランスパネル」で
 効果の順番を入れ替える
⑦ ハイライトの入った文字の完成
⁡
この投稿を保存して、何度も見返せるようにしてね✨
⁡
——————————————————————
・無料の女性限定コミュニティ「リスコミュ」を運営中
・Webデザインスクール「リスラボ」では自立するママを育成中!
・株式会社iris(Web制作会社)代表取締役
・初心者向けに超有益なWebデザインブログ(デザイン〜コーディング、WordPress化)を運営中
⁡
詳しくはプロフィールをチェックしてね!
@aichan_webdesign
⁡
#Adobe
#AdobeIllustrator
#Illustrator
#webデザイン 
#webデザイナー
💡 超簡単!一部の色だけ残す加工
をPhotoshopで作成しよう!
⁡
① 画像を用意する
② 画像を白黒にする
③ 色を残す部分を選択する
④ 「選択とマスク」でぼかしを加える
⑤ ブラシツールで色を出したい箇所をなぞる
⑥ 一部の色だけ残した画像の完成
⑦ 立体感のある可愛いシールの完成
⁡
この投稿を保存して、何度も見返せるようにしてね✨
⁡
——————————————————————
・無料の女性限定コミュニティ「リスコミュ」を運営中
・Webデザインスクール「リスラボ」では自立するママを育成中!
・株式会社iris(Web制作会社)代表取締役
・初心者向けに超有益なWebデザインブログ(デザイン〜コーディング、WordPress化)を運営中
⁡
詳しくはプロフィールをチェックしてね!
@aichan_webdesign
⁡
#Adobe
#AdobePhotoshop
#Photoshop
#webデザイン 
#webデザイナー
@aichan_webdesign ←HTMLとCSSだけで花火のアニメーション作れるって知ってた?

CSSでどうやってアニメーション作るの?
と思っている方必見!

今回は夏にぴったりの花火のアニメーションの
コードを記載したブログをプレゼント✨
⁡
欲しい方は「好きなかき氷の味」をコメントで教えてね☺️
⁡
そのままコードをコピペして使えるから、
ぜひ活用してね👍
⁡
-—————————————
AIRI SEKIGUCHI
⁡
お役立ち情報を発信するので
フォローしてね♡ 
" @aichan_webdesign "
⁡
⁡
ーお知らせー
■女性限定Webデザイン無料コミュニティ
リニューアルしました!
すでに200名を突破

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

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

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

お問い合わせはDMからお願いします📩
⁡
⁡
-—————————————
⁡
#webデザイン 
#webデザイナー 
#プログラミング
#html
#css
💡 簡単楽しい!柔らかくめり込む加 💡 簡単楽しい!柔らかくめり込む加工
をIllustratorで作成しよう!
⁡
① オブジェクトを用意する
② オブジェクトをグループ化する
③ アピアランスパネルを出す
④ 「パスファインダー」→「合流」を適用する
⑤ 「新規効果を追加」→
 「角を丸くする」の数値を入力
⑥ 柔らかくめり込むような加工の完成
⑦ おまけ
⁡
この投稿を保存して、何度も見返せるようにしてね✨
⁡
——————————————————————
・無料の女性限定コミュニティ「リスコミュ」を運営中
・Webデザインスクール「リスラボ」では自立するママを育成中!
・株式会社iris(Web制作会社)代表取締役
・初心者向けに超有益なWebデザインブログ(デザイン〜コーディング、WordPress化)を運営中
⁡
詳しくはプロフィールをチェックしてね!
@aichan_webdesign
⁡
#Adobe
#AdobeIllustrator
#Illustrator
#webデザイン 
#webデザイナー
💡 これは凄い!立体感のあるシール 💡 これは凄い!立体感のあるシールの作り方
をPhotoshopで作成しよう!
⁡
① 画像を用意し被写体を選択する
② 選択範囲を調整する
③ 白色のベタ塗りを追加→レイヤーを結合する
④ 「ベベルとエンボス」と「輪郭」を適用
⑤ レイヤースタイルの「境界線」
 「シャドウ(内側)」を適用
⑥ レイヤースタイルの「ドロップシャドウ」を適用
⑦ 立体感のある可愛いシールの完成
⁡
この投稿を保存して、何度も見返せるようにしてね✨
⁡
——————————————————————
・無料の女性限定コミュニティ「リスコミュ」を運営中
・Webデザインスクール「リスラボ」では自立するママを育成中!
・株式会社iris(Web制作会社)代表取締役
・初心者向けに超有益なWebデザインブログ(デザイン〜コーディング、WordPress化)を運営中
⁡
詳しくはプロフィールをチェックしてね!
@aichan_webdesign
⁡
#Adobe
#AdobePhotoshop
#Photoshop
#webデザイン 
#webデザイナー
@aichan_webdesign ←歯を白くするテクニックを知ってる?

この方法を使うと
たった3ステップで
歯のホワイトニングができるよ!

これを応用して、
充血したように見える目を
白く修正することも可能だよ⭕️

①白目の部分をクイック選択ツールで選択
②「イメージ」→「色調補正」→「色相・彩度」をクリック
③レッド系に変更したら、彩度を下げて、明度を上げると完成

画像のレタッチをしたい時に活用してね✨

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

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

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

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

お問い合わせはDMからお願いします📩
⁡
⁡
-—————————————
⁡
#webデザイン 
#webデザイナー 
#adobe
#adobePhotoshop
#Photoshop
💡 これは使える!平面地図を3Dに加工
をIllustratorで作成しよう!
⁡
① 「直線ツール」や「図形ツール」で地図を作成
② 「パスのアウトライン」を選択し
 好きな角度に回転させる
③ 「拡大・縮小」パネルで数値を入力する
④ 「3Dとマテリアル」→「3D」→
 「押し出しとベベル」を選択
⑤ パネルに数値を入力し向きや高さを調整する
⑥ 建物の高さを個別に調整する
⑦ 立体的な地図の完成
⁡
この投稿を保存して、何度も見返せるようにしてね✨
⁡
——————————————————————
・無料の女性限定コミュニティ「リスコミュ」を運営中
・Webデザインスクール「リスラボ」では自立するママを育成中!
・株式会社iris(Web制作会社)代表取締役
・初心者向けに超有益なWebデザインブログ(デザイン〜コーディング、WordPress化)を運営中
⁡
詳しくはプロフィールをチェックしてね!
@aichan_webdesign
⁡
#Adobe
#AdobeIllustrator
#Illustrator
#webデザイン 
#webデザイナー
💡 簡単お洒落!画像の間に文字を挟 💡 簡単お洒落!画像の間に文字を挟む方法
をPhotoshopで作成しよう!
⁡
① 背景レイヤーの上に画像と
 間に挟みたい文字を乗せる
② スマートオブジェクトに変換する
③ 文字を画像の中に配置し、場所を調整する
④ レイヤーマスクをかける
⑤ レイヤーを追加し色をつける
⑥ 画像の隠れた部分を表示させる
⑦ 画像の間に文字を挟む加工の完成
⁡
この投稿を保存して、何度も見返せるようにしてね✨
⁡
——————————————————————
・無料の女性限定コミュニティ「リスコミュ」を運営中
・Webデザインスクール「リスラボ」では自立するママを育成中!
・株式会社iris(Web制作会社)代表取締役
・初心者向けに超有益なWebデザインブログ(デザイン〜コーディング、WordPress化)を運営中
⁡
詳しくはプロフィールをチェックしてね!
@aichan_webdesign
⁡
#Adobe
#AdobePhotoshop
#Photoshop
#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.