MENU

Home
My Blog
Community

rislabo Web Design Blog

Home
My Blog
Community

ホーム
Sass

Sass– tag –

Sass

Sassの記法について徹底解説！

2024年6月12日
Sass

Sassって何？Sassについて解説！

2024年6月11日

1

検索

関口愛里

株式会社iris代表取締役

■Web制作会社を経営
■女性の自立をサポートするWebデザインスクール運営
■現在140名超えの女性限定のWebデザインチームを運営
■Webデザイナーを目指したい方に向けてWebデザイナーになるために必要な勉強方法〜現場のリアルを発信していきます。

カテゴリ一覧

デザイン (106)
フリーランス (9)
プログラミング (55)
未分類 (6)

タグ一覧

adobe Figma Google Chrome HTML&CSS Illustrator JavaScript Photoshop Sass VS Code Webデザイナー Webデザイン Web制作 WordPress コーディングデザイン基礎バナーフォントフリーランスフリー素材ポートフォリオ制作実績

instagram

aichan_webdesign

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

💡とっても便利！編集できるマーカーの作り方
を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
⁡
————————————
⁡
今日はリスラボ1期性
なっちゃんの卒業後実績を紹介するよ！
⁡
【なっちゃんの実績】
・1児のシングルマザー
・コーダーとして活動
・irisのメインコーダーに抜擢

⁡
▪️Q&A

Q.リスラボに入る前は何をしていましたか？

A. 料理人の仕事をしながらフリーランスを目指してwebデザインを学んでいました。
 
Q.どんな事に悩んでいましたか？

A. 他のwebデザインスクールを卒業しましたが、自力で案件も取れず、実力不足を痛感していました。
 
Q.リスラボに入会しようと思った
きっかけはなんですか？

　A. 実力不足で悩んでいる時、愛ちゃんに出会い、愛ちゃん「ママだって輝ける」という言葉がとても刺さり、入会を決めました。
⁡
⁡
Q.リスラボに実際入ってみてどうでしたか？ 
⁡　A. webデザインのスキルだけでなく、マインドも大きく変わり、人生を変えるきっかけになりました！
⁡
————————————
⁡
なかなかうまくいかないあなた。
努力の方向性が間違ってないですか？
⁡
本気で頑張れば半年あれば人生は変わります。
⁡
1人で悩んでる方は遠慮なくDMで相談してください😌
⁡
————————————
・無料の女性限定コミュニティ「リスコミュ」を運営中
・Webデザインスクール「リスラボ」では自立するママを育成中！
・株式会社iris（Web制作会社）代表取締役
・初心者向けに超有益なWebデザインブログ（デザイン〜コーディング、WordPress化）を運営中
⁡
詳しくはプロフィールをチェックしてね！
@aichan_webdesign
⁡

#webデザイン
#webデザイナー
#ママWebデザイナー

💡超便利！画像からフォントを検索する方法
をIllustratorで作成しよう！
⁡
①調べたいフォントの画像を配置する
②「Retype」を選択する
③ 調べたい範囲を指定する
④ 「Retype」パネルで検索結果を確認する
⑤フォントが見つかったら
　｢クリックして追加」する
⑥画像からフォントの検索が完了
⁡
この投稿を保存して、何度も見返せるようにしてね✨
⁡
——————————————————————
・無料の女性限定コミュニティ「リスコミュ」を運営中
・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 ←違和感なくライトを明るくする方法知ってる？

今日のリールは
「違和感なくライトを明るくする方法」について
解説してみたよ！

①編集する画像を用意する
②新規レイヤーを追加して選択範囲を作成
③選択範囲を白で塗りつぶし、不透明度を下げる
④レイヤー効果の設定
⑤ぼかし（ガウス）をかける
⑥新規レイヤーを追加してブラシツールで光を足す
⑦④と同様にレイヤー効果の設定
⑧自然にライトをつけた画像の完成

描画モードをオーバーレイにするだけで
⁡自然な光をつけることができるから
⁡色々な画像で試してみてね✨
⁡
-—————————————
AIRI SEKIGUCHI
⁡
お役立ち情報を発信するので
フォローしてね♡
" @aichan_webdesign "
⁡
⁡
ーやってることー
■現在270名を超える無料女性限定コミュニティ
（リスコミュ）を運営中
・女性限定の駆け出しデザイナーからベテランデザイナーの方までいます。
・勉強会や懇親会を月1.2回で開いてます
・興味ある方はお気軽に参加してね♡
→参加条件は最初にzoomで顔合わせ出来る方、女性、頑張りたい方、輪を乱さない方
⁡
⁡
参加方法は
①プロフィールに移動
②プロフィールのURL（LINE公式）をタップ
⁡
↓ ↓ ↓
ライン公式から友達追加して
『リスコミュ』と送ってね✨
⁡
もしくはInstagramのDMに
『リスコミュ』とメッセージしてね☺️
⁡
⁡
■ iris mama creative labo
リスラボ運営・代表
デザイン〜コーディングまで一貫して出来る強者ママを育成
⁡
⁡
■株式会社iris（Web制作会社）代表取締役
<サービス内容>
・ホームページ、LP制作
（デザイン〜コーディング）、Webサイト全般、システム開発
・印刷物（名刺、チラシ、パンフレット、
メニュー、ポスター等）
・映像編集
⁡
お問い合わせはDMからお願いします📩
⁡
⁡
-—————————————
⁡
#webデザイン
#webデザイナー
#Adobe
#AdobePhotoshop
#Photoshop

💡 保存必須！お洒落な縁取り画像の

💡 保存必須！お洒落な縁取り画像の作り方
を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 ←壁に沿って文字を入れる方法知ってる？

今日のリールは
「壁に沿って文字を入れる方法」について
解説してみたよ！

①編集する画像を用意
②テキストを入力
③文字の選択範囲を作成＆コピーしてからレイヤーを非表示にする
④新規レイヤーを作成して「フィルター」→「消点」を選択
⑤壁に沿って面を作成
⑥文字の大きさを調整
⑦レイヤースタイルを調整
⑧壁に沿って文字を入れた画像の完成

文字以外にもロゴを入れたり
モックアップとしても使えるから
色々な素材で試してみるのも面白いです✨⁡
⁡
⁡
-—————————————
AIRI SEKIGUCHI
⁡
お役立ち情報を発信するので
フォローしてね♡
" @aichan_webdesign "
⁡
⁡
ーやってることー
■現在270名を超える無料女性限定コミュニティ
（リスコミュ）を運営中
・女性限定の駆け出しデザイナーからベテランデザイナーの方までいます。
・勉強会や懇親会を月1.2回で開いてます
・興味ある方はお気軽に参加してね♡
→参加条件は最初にzoomで顔合わせ出来る方、女性、頑張りたい方、輪を乱さない方
⁡
⁡
参加方法は
①プロフィールに移動
②プロフィールのURL（LINE公式）をタップ
⁡
↓ ↓ ↓
ライン公式から友達追加して
『リスコミュ』と送ってね✨
⁡
もしくはInstagramのDMに
『リスコミュ』とメッセージしてね☺️
⁡
⁡
■ iris mama creative labo
リスラボ運営・代表
デザイン〜コーディングまで一貫して出来る強者ママを育成
⁡
⁡
■株式会社iris（Web制作会社）代表取締役
<サービス内容>
・ホームページ、LP制作
（デザイン〜コーディング）、Webサイト全般、システム開発
・印刷物（名刺、チラシ、パンフレット、
メニュー、ポスター等）
・映像編集
⁡
お問い合わせはDMからお願いします📩
⁡
⁡
-—————————————
⁡
#webデザイン
#webデザイナー
#Adobe
#AdobePhotoshop
#Photoshop

💡 超楽しい！お絵描きに色を付ける

💡 超楽しい！お絵描きに色を付ける方法
を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←あなたは何問分かる？

@aichan_webdesign←あなたは何問分かる？

Webデザイナーなら知らなきゃやばい
デザイン常識クイズ！！

もし、答えられない問題があったら
今日でちゃんと覚えて✨

-—————————————
AIRI SEKIGUCHI
⁡
お役立ち情報を発信するので
フォローしてね♡
" @aichan_webdesign "
⁡
⁡
ーやってることー
■現在270名を超える無料女性限定コミュニティ
（リスコミュ）を運営中
・女性限定の駆け出しデザイナーからベテランデザイナーの方までいます。
・勉強会や懇親会を月1.2回で開いてます
・興味ある方はお気軽に参加してね♡
→参加条件は最初にzoomで顔合わせ出来る方、女性、頑張りたい方、輪を乱さない方
⁡
⁡
参加方法は
①プロフィールに移動
②プロフィールのURL（LINE公式）をタップ
⁡
↓ ↓ ↓
ライン公式から友達追加して
『リスコミュ』と送ってね✨
⁡
もしくはInstagramのDMに
『リスコミュ』とメッセージしてね☺️
⁡
⁡
■ iris mama creative labo
リスラボ運営・代表
デザイン〜コーディングまで一貫して出来る強者ママを育成
⁡
⁡
■株式会社iris（Web制作会社）代表取締役
<サービス内容>
・ホームページ、LP制作
（デザイン〜コーディング）、Webサイト全般、システム開発
・印刷物（名刺、チラシ、パンフレット、
メニュー、ポスター等）
・映像編集
⁡
お問い合わせはDMからお願いします📩
⁡
⁡
-—————————————
⁡
#webデザイン
#webデザイナー
#Photoshop
#adobephotoshop

💡超簡単！飛び出す３D文字加工をIl

💡超簡単！飛び出す３D文字加工
をIllustratorで作成しよう！
⁡
①「文字ツール｣でベースとなる文字を打ち込む
②「アピアランスパネル｣で
　背景となる｢塗り｣を設定
③前面に飛び出す文字の色を設定する
④「パスのオフセット」を設定する
⑤「新規効果を追加」で「パスの変形」を選択する
⑥「変形効果パネル」で数値を設定する
⑦飛び出したような３D文字の加工が完成
⁡
この投稿を保存して、何度も見返せるようにしてね✨
⁡
——————————————————————
・無料の女性限定コミュニティ「リスコミュ」を運営中
・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←自然なチークの入れ方

@aichan_webdesign←自然なチークの入れ方を教えちゃうよ✨

人物の画像を使いたいけど、もう少し華やかにしたい！
そんな時に使える自然なチークの入れ方を紹介するよ！

①用意した写真のチークを入れたい部分を、なげなわツールで囲む
②レイヤー→新規調整レイヤーから、トーンカーブを選ぶ
③トーンカーブの操作パネルの、「RGB」をクリックし、「レッド」を選ぶ
④トーンカーブの中間あたりを上に向かってドラッグする
⑤マスクを押して、ぼかしのスライダーを動かして自然な濃さにする
⑥不透明度を少し下げる
⑦画像に馴染んだチークの完成✨　
⁡
⁡寂しい印象の写真も、簡単な編集で華やかな印象に変えられるから、
見返せるように保存して、活用してみてね✨⁡⁡
⁡
⁡
-—————————————
AIRI SEKIGUCHI
⁡
お役立ち情報を発信するので
フォローしてね♡
" @aichan_webdesign "
⁡
⁡
ーやってることー
■現在270名を超える無料女性限定コミュニティ
（リスコミュ）を運営中
・女性限定の駆け出しデザイナーからベテランデザイナーの方までいます。
・勉強会や懇親会を月1.2回で開いてます
・興味ある方はお気軽に参加してね♡
→参加条件は最初にzoomで顔合わせ出来る方、女性、頑張りたい方、輪を乱さない方
⁡
⁡
参加方法は
①プロフィールに移動
②プロフィールのURL（LINE公式）をタップ
⁡
↓ ↓ ↓
ライン公式から友達追加して
『リスコミュ』と送ってね✨
⁡
もしくはInstagramのDMに
『リスコミュ』とメッセージしてね☺️
⁡
⁡
■ iris mama creative labo
リスラボ運営・代表
デザイン〜コーディングまで一貫して出来る強者ママを育成
⁡
⁡
■株式会社iris（Web制作会社）代表取締役
<サービス内容>
・ホームページ、LP制作
（デザイン〜コーディング）、Webサイト全般、システム開発
・印刷物（名刺、チラシ、パンフレット、
メニュー、ポスター等）
・映像編集
⁡
お問い合わせはDMからお願いします📩
⁡
⁡
-—————————————
⁡
#webデザイン
#webデザイナー
#Photoshop
#adobephotoshop

💡 簡単キレイ！図形でグラデを作る

💡 簡単キレイ！図形でグラデを作る方法
をIllustratorで作成しよう！
⁡
①「図形ツール」で図形を作成する
②好きな位置に図形を配置する
③配置した図形に好みの色を設定する
④「ブレンドツール」を選択する
⑤図形を順にクリックする
⑥図形で作られたグラデーションの完成
⁡
この投稿を保存して、何度も見返せるようにしてね✨
⁡
——————————————————————
・無料の女性限定コミュニティ「リスコミュ」を運営中
・Webデザインスクール「リスラボ」では自立するママを育成中！
・株式会社iris（Web制作会社）代表取締役
・初心者向けに超有益なWebデザインブログ（デザイン〜コーディング、WordPress化）を運営中
⁡
詳しくはプロフィールをチェックしてね！
@aichan_webdesign
⁡
#Adobe
#AdobeIllustrator
#Illustrator
#webデザイン
#webデザイナー

💡 超お洒落！光でエモさを演出する

💡 超お洒落！光でエモさを演出する方法
をPhotoshopで作成しよう！
⁡
①加工したい画像を用意し
　長方形ツールで光の形を作る
②01の工程で作成したものを
　スマートオブジェクト化する
③選択範囲を作成してレイヤーを非表示にする
④調整レイヤー→「レベル補正」をクリック
⑤つまみを動かし光加減を調整する
⑥｢フィルター｣→｢ぼかし｣→
　｢ぼかし(ガウス)｣を選択
⑦光でエモさを演出した画像の完成
⁡
この投稿を保存して、何度も見返せるようにしてね✨
⁡
——————————————————————
・無料の女性限定コミュニティ「リスコミュ」を運営中
・Webデザインスクール「リスラボ」では自立するママを育成中！
・株式会社iris（Web制作会社）代表取締役
・初心者向けに超有益なWebデザインブログ（デザイン〜コーディング、WordPress化）を運営中
⁡
詳しくはプロフィールをチェックしてね！
@aichan_webdesign
⁡
#Adobe
#AdobePhotoshop
#Photoshop
#webデザイン
#webデザイナー

@aichan_webdesign ←アーティスティックな画像の作り方知ってる？

今日のリールは
「アーティスティックな画像の作り方」について
解説してみたよ！

①加工する画像を用意する
②調整レイヤーから「グラデーション」を選択
③グラデーションエディターから透明色に切り替わるグラデーションを選択する
④グラデーションの色を変更する
⑤描画モードを「スクリーン」に変更する
⑥レイヤーを複製して色を補色に変更する
⑦グラデーションの方向を「逆方向にする」
⑧描画モードを「カラー」にする
⑨アーティスティックな画像の完成✨

今回紹介したデュオトーンの鉄則は
補色（色相環で正反対の位置にある色同士の組み合わせのこと）を使うのが基本だよ！

画像の雰囲気を簡単に変えられるから
色々な写真やカラーで試してみてね！

⁡
⁡
-—————————————
AIRI SEKIGUCHI
⁡
お役立ち情報を発信するので
フォローしてね♡
" @aichan_webdesign "
⁡
⁡
ーやってることー
■現在270名を超える無料女性限定コミュニティ
（リスコミュ）を運営中
・女性限定の駆け出しデザイナーからベテランデザイナーの方までいます。
・勉強会や懇親会を月1.2回で開いてます
・興味ある方はお気軽に参加してね♡
→参加条件は最初にzoomで顔合わせ出来る方、女性、頑張りたい方、輪を乱さない方
⁡
⁡
参加方法は
①プロフィールに移動
②プロフィールのURL（LINE公式）をタップ
⁡
↓ ↓ ↓
ライン公式から友達追加して
『リスコミュ』と送ってね✨
⁡
もしくはInstagramのDMに
『リスコミュ』とメッセージしてね☺️
⁡
⁡
■ iris mama creative labo
リスラボ運営・代表
デザイン〜コーディングまで一貫して出来る強者ママを育成
⁡
⁡
■株式会社iris（Web制作会社）代表取締役
<サービス内容>
・ホームページ、LP制作
（デザイン〜コーディング）、Webサイト全般、システム開発
・印刷物（名刺、チラシ、パンフレット、
メニュー、ポスター等）
・映像編集
⁡
お問い合わせはDMからお願いします📩
⁡
⁡
-—————————————
⁡
#webデザイン
#webデザイナー
#Adobe
#AdobePhotoshop
#Photoshop

💡 とっても便利！編集可能なマーカ

💡 とっても便利！編集可能なマーカーの作り方
を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デザイナー

さらに読み込む Instagram でフォロー

X

Tweets by mama_beyourself

関口愛里

株式会社iris代表取締役

■Web制作会社を経営
■女性の自立をサポートするWebデザインスクール運営
■現在250名超えの女性限定のWebデザインチームを運営
■Webデザイナーを目指したい方に向けてWebデザイナーになるために必要な勉強方法〜現場のリアルを発信していきます。

instagram

aichan_webdesign

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

💡とっても便利！編集できるマーカーの作り方
を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
⁡
————————————
⁡
今日はリスラボ1期性
なっちゃんの卒業後実績を紹介するよ！
⁡
【なっちゃんの実績】
・1児のシングルマザー
・コーダーとして活動
・irisのメインコーダーに抜擢

⁡
▪️Q&A

Q.リスラボに入る前は何をしていましたか？

A. 料理人の仕事をしながらフリーランスを目指してwebデザインを学んでいました。
 
Q.どんな事に悩んでいましたか？

A. 他のwebデザインスクールを卒業しましたが、自力で案件も取れず、実力不足を痛感していました。
 
Q.リスラボに入会しようと思った
きっかけはなんですか？

　A. 実力不足で悩んでいる時、愛ちゃんに出会い、愛ちゃん「ママだって輝ける」という言葉がとても刺さり、入会を決めました。
⁡
⁡
Q.リスラボに実際入ってみてどうでしたか？ 
⁡　A. webデザインのスキルだけでなく、マインドも大きく変わり、人生を変えるきっかけになりました！
⁡
————————————
⁡
なかなかうまくいかないあなた。
努力の方向性が間違ってないですか？
⁡
本気で頑張れば半年あれば人生は変わります。
⁡
1人で悩んでる方は遠慮なくDMで相談してください😌
⁡
————————————
・無料の女性限定コミュニティ「リスコミュ」を運営中
・Webデザインスクール「リスラボ」では自立するママを育成中！
・株式会社iris（Web制作会社）代表取締役
・初心者向けに超有益なWebデザインブログ（デザイン〜コーディング、WordPress化）を運営中
⁡
詳しくはプロフィールをチェックしてね！
@aichan_webdesign
⁡

#webデザイン
#webデザイナー
#ママWebデザイナー

💡超便利！画像からフォントを検索する方法
をIllustratorで作成しよう！
⁡
①調べたいフォントの画像を配置する
②「Retype」を選択する
③ 調べたい範囲を指定する
④ 「Retype」パネルで検索結果を確認する
⑤フォントが見つかったら
　｢クリックして追加」する
⑥画像からフォントの検索が完了
⁡
この投稿を保存して、何度も見返せるようにしてね✨
⁡
——————————————————————
・無料の女性限定コミュニティ「リスコミュ」を運営中
・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 ←違和感なくライトを明るくする方法知ってる？

今日のリールは
「違和感なくライトを明るくする方法」について
解説してみたよ！

①編集する画像を用意する
②新規レイヤーを追加して選択範囲を作成
③選択範囲を白で塗りつぶし、不透明度を下げる
④レイヤー効果の設定
⑤ぼかし（ガウス）をかける
⑥新規レイヤーを追加してブラシツールで光を足す
⑦④と同様にレイヤー効果の設定
⑧自然にライトをつけた画像の完成

描画モードをオーバーレイにするだけで
⁡自然な光をつけることができるから
⁡色々な画像で試してみてね✨
⁡
-—————————————
AIRI SEKIGUCHI
⁡
お役立ち情報を発信するので
フォローしてね♡
" @aichan_webdesign "
⁡
⁡
ーやってることー
■現在270名を超える無料女性限定コミュニティ
（リスコミュ）を運営中
・女性限定の駆け出しデザイナーからベテランデザイナーの方までいます。
・勉強会や懇親会を月1.2回で開いてます
・興味ある方はお気軽に参加してね♡
→参加条件は最初にzoomで顔合わせ出来る方、女性、頑張りたい方、輪を乱さない方
⁡
⁡
参加方法は
①プロフィールに移動
②プロフィールのURL（LINE公式）をタップ
⁡
↓ ↓ ↓
ライン公式から友達追加して
『リスコミュ』と送ってね✨
⁡
もしくはInstagramのDMに
『リスコミュ』とメッセージしてね☺️
⁡
⁡
■ iris mama creative labo
リスラボ運営・代表
デザイン〜コーディングまで一貫して出来る強者ママを育成
⁡
⁡
■株式会社iris（Web制作会社）代表取締役
<サービス内容>
・ホームページ、LP制作
（デザイン〜コーディング）、Webサイト全般、システム開発
・印刷物（名刺、チラシ、パンフレット、
メニュー、ポスター等）
・映像編集
⁡
お問い合わせはDMからお願いします📩
⁡
⁡
-—————————————
⁡
#webデザイン
#webデザイナー
#Adobe
#AdobePhotoshop
#Photoshop

💡 保存必須！お洒落な縁取り画像の

💡 保存必須！お洒落な縁取り画像の作り方
を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 ←壁に沿って文字を入れる方法知ってる？

今日のリールは
「壁に沿って文字を入れる方法」について
解説してみたよ！

①編集する画像を用意
②テキストを入力
③文字の選択範囲を作成＆コピーしてからレイヤーを非表示にする
④新規レイヤーを作成して「フィルター」→「消点」を選択
⑤壁に沿って面を作成
⑥文字の大きさを調整
⑦レイヤースタイルを調整
⑧壁に沿って文字を入れた画像の完成

文字以外にもロゴを入れたり
モックアップとしても使えるから
色々な素材で試してみるのも面白いです✨⁡
⁡
⁡
-—————————————
AIRI SEKIGUCHI
⁡
お役立ち情報を発信するので
フォローしてね♡
" @aichan_webdesign "
⁡
⁡
ーやってることー
■現在270名を超える無料女性限定コミュニティ
（リスコミュ）を運営中
・女性限定の駆け出しデザイナーからベテランデザイナーの方までいます。
・勉強会や懇親会を月1.2回で開いてます
・興味ある方はお気軽に参加してね♡
→参加条件は最初にzoomで顔合わせ出来る方、女性、頑張りたい方、輪を乱さない方
⁡
⁡
参加方法は
①プロフィールに移動
②プロフィールのURL（LINE公式）をタップ
⁡
↓ ↓ ↓
ライン公式から友達追加して
『リスコミュ』と送ってね✨
⁡
もしくはInstagramのDMに
『リスコミュ』とメッセージしてね☺️
⁡
⁡
■ iris mama creative labo
リスラボ運営・代表
デザイン〜コーディングまで一貫して出来る強者ママを育成
⁡
⁡
■株式会社iris（Web制作会社）代表取締役
<サービス内容>
・ホームページ、LP制作
（デザイン〜コーディング）、Webサイト全般、システム開発
・印刷物（名刺、チラシ、パンフレット、
メニュー、ポスター等）
・映像編集
⁡
お問い合わせはDMからお願いします📩
⁡
⁡
-—————————————
⁡
#webデザイン
#webデザイナー
#Adobe
#AdobePhotoshop
#Photoshop

Instagram でフォロー

カテゴリ一覧

デザイン (106)
フリーランス (9)
プログラミング (55)
未分類 (6)

タグ一覧

adobe Figma Google Chrome HTML&CSS Illustrator JavaScript Photoshop Sass VS Code Webデザイナー Webデザイン Web制作 WordPress コーディングデザイン基礎バナーフォントフリーランスフリー素材ポートフォリオ制作実績

Home
プライバシーポリシー

© 2024 iris inc.