MENU

Home
My Blog
Community

rislabo Web Design Blog

Home
My Blog
Community

ホーム
プログラミング
Sass

Sass– category –

プログラミングSass

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で作成しよう！
⁡
①テキストツールで文字を入力する
②ウィンドウから生成パターン(Beta)を選択
③作りたいイメージのプロンプトを入力
④生成パターンの完成
⑤おまけー1
⑥おまけー2
⁡
この投稿を保存して、何度も見返せるようにしてね✨
⁡
——————————————————————
・無料の女性限定コミュニティ「リスコミュ」を運営中
・Webデザインスクール「リスラボ」では自立するママを育成中！
・株式会社iris（Web制作会社）代表取締役
・初心者向けに超有益なWebデザインブログ（デザイン〜コーディング、WordPress化）を運営中
⁡
詳しくはプロフィールをチェックしてね！
@aichan_webdesign
⁡
#webデザイン
#webデザイナー
#ママWebデザイナー
#Illustrator

💡これは面白い！誰でもできるラップ加工
をPhotoshopで実践しよう！
⁡
①レイヤーを追加し黒で塗りつぶす
② 「雲模様」のフィルターを選択し、
　歪みを適用する
③「フィルターギャラリー｣から
　「ラップ｣を適用する
④「レベル補正」の数値を調整する
⑤「色域指定」で「ハイライト」を選択する
⑥レイヤーを複製し描画モードを変更する
⑦ラップをかけたような加工の完成
⁡
この投稿を保存して、何度も見返せるようにしてね✨
⁡
——————————————————————
・無料の女性限定コミュニティ「リスコミュ」を運営中
・Webデザインスクール「リスラボ」では自立するママを育成中！
・株式会社iris（Web制作会社）代表取締役
・初心者向けに超有益なWebデザインブログ（デザイン〜コーディング、WordPress化）を運営中
⁡
詳しくはプロフィールをチェックしてね！
@aichan_webdesign
⁡
#webデザイン
#webデザイナー
#ママWebデザイナー
#Photoshop
#画像加工

←Webデザイナーにセンスはいらないは嘘？

今日は良く質問をいただく
Webデザイナーにセンスはいらない？に
フォーカスして私の考えを話してます！

重要なので最後まで見てね！

——————————————————————
・無料の女性限定コミュニティ「リスコミュ」を運営中
・Webデザインスクール「リスラボ」では自立するママを育成中！
・株式会社iris（Web制作会社）代表取締役
・初心者向けに超有益なWebデザインブログ（デザイン〜コーディング、WordPress化）を運営中
⁡
詳しくはプロフィールをチェックしてね！
@aichan_webdesign
⁡
#webデザイン
#webデザイナー
#ママWebデザイナー

💡知っておきたい！VSCode画面のおすすめ設定
を実践しよう！
⁡
①日本語化
②画面分割
③配色テーマ
④フォントサイズ
⑤インデントタブの幅
⑥自動保存
⑦ミニマップ
⁡
この投稿を保存して、何度も見返せるようにしてね✨
⁡
——————————————————————
・無料の女性限定コミュニティ「リスコミュ」を運営中
・Webデザインスクール「リスラボ」では自立するママを育成中！
・株式会社iris（Web制作会社）代表取締役
・初心者向けに超有益なWebデザインブログ（デザイン〜コーディング、WordPress化）を運営中
⁡
詳しくはプロフィールをチェックしてね！
@aichan_webdesign
⁡
#webデザイン
#webデザイナー
#ママWebデザイナー
#コーディング

💡簡単可愛い！チェキ風画像の作り方
をPhotoshopで実践しよう！
⁡
①「長方形ツール」を選択し長方形を描く
② 01で描いた長方形の角を丸くする
③ドロップシャドウの設定をする
④フレームにはめ込みたい写真を用意する
⑤「フレームツール」を選択し四角を描く
⑥写真を移動する
⑦チェキ風画像の完成
⁡
この投稿を保存して、何度も見返せるようにしてね✨
⁡
——————————————————————
・無料の女性限定コミュニティ「リスコミュ」を運営中
・Webデザインスクール「リスラボ」では自立するママを育成中！
・株式会社iris（Web制作会社）代表取締役
・初心者向けに超有益なWebデザインブログ（デザイン〜コーディング、WordPress化）を運営中
⁡
詳しくはプロフィールをチェックしてね！
@aichan_webdesign
⁡
#webデザイン
#webデザイナー
#ママWebデザイナー
#Photoshop
#画像加工

@aichan_webdesign ←好きな果物を教えてね🎁

もうコーディングをしなくても良いかも⁉︎

⁡Figmaで作成したデザインが
あるAIツールに共有リンクを貼るだけで
⁡自動でコードを生成してくれる😳

この便利なAIツールを知りたい方は、
「好きな果物」をコメントで教えてね！
教えてくれた方に🎁しちゃいます✨
⁡
ただ注意点があって…
生成されたコードは完璧ではないので
手直しする必要があるよ！

コーディングの知識はやっぱり必要💻

時短になることは間違いないから、
AIを活用して作業効率アップしていこう✨

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

💡 簡単お洒落！切り絵風画像の作り

💡 簡単お洒落！切り絵風画像の作り方
をIllustratorで作成しよう！
⁡
①素材を準備する
②背景を作成してロックし素材を配置する
③加工するために｢トレース｣し｢拡張｣する
④「ダイレクト選択ツール」で素材を抜き取る
⑤素材の色を「白」にする
⑥色を変更した素材に
　「ドロップシャドウ」をかける
⑦切り絵風画像の完成
⁡
この投稿を保存して、何度も見返せるようにしてね✨
⁡
——————————————————————
・無料の女性限定コミュニティ「リスコミュ」を運営中
・Webデザインスクール「リスラボ」では自立するママを育成中！
・株式会社iris（Web制作会社）代表取締役
・初心者向けに超有益なWebデザインブログ（デザイン〜コーディング、WordPress化）を運営中
⁡
詳しくはプロフィールをチェックしてね！
@aichan_webdesign
⁡
#webデザイン
#webデザイナー
#ママWebデザイナー
#Illustrator

💡これでOK！よくあるお悩み解決法
をPhotoshopで実践しよう！
⁡
①＜事象その1＞移動ツールで謎のマークが出た時
②＜解決法＞「自由変形ツール」のチェックを外す
③＜事象その2＞ブラシのポインタが十字になった時
④＜解決法＞CapsLockキー
（Shift ＋ Caps Lock キー）を押す
⑤＜事象その3＞基準点に数字を書いたようなマークが出た時
⑥＜解決法＞Option（Alt）＋クリックで削除
⁡
この投稿を保存して、何度も見返せるようにしてね✨
⁡
——————————————————————
・無料の女性限定コミュニティ「リスコミュ」を運営中
・Webデザインスクール「リスラボ」では自立するママを育成中！
・株式会社iris（Web制作会社）代表取締役
・初心者向けに超有益なWebデザインブログ（デザイン〜コーディング、WordPress化）を運営中
⁡
詳しくはプロフィールをチェックしてね！
@aichan_webdesign
⁡
#webデザイン
#webデザイナー
#ママWebデザイナー
#Photoshop

@aichan_webdesign ←リップの色を自由に変更する方法💄✨

今日のリールは
⁡
「リップの色を自由に変更する方法」について
解説してみたよ！

①「調整レイヤー」→「ベタ塗り」をクリックして一旦、変更したことがわかりやすい色に設定
②ベタ塗りレイヤーの描画モードを「乗算」に変更し、マスク部分をクリックした後、Command（Ctrl）＋Iを押してマスクを反転
③ブラシツールを選択して、画面上部のブラシの設定アイコンをクリックしてブラシを設定し、「不透明度」「流量」をそれぞれ100％に設定しておく
④マスク部分を選択した状態で、リップの部分をなぞって塗りつぶしていく
⑤レイヤーの右側をダブルクリックしてブレンド条件の「下になっているレイヤー」の
コマをoption（Alt）を押しながらクリックし２つに割れるのでそれぞれコマを調整
⑥ベタ塗りレイヤーのカラーの部分をダブルクリックし、リップを好きな色に変更
⑦「塗り」を少し下げて濃さを自然にしたら、リップの色を自由に変更した画像の完成

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

@aichan_webdesign←
投稿の最後でプレゼントあり🎁
⁡
今回実際に使った
コードをプレゼントしちゃいます✨️
⁡
受け取り方は簡単！
⁡
「点滅ボタン」
の5文字のみをコメントに送るだけ♡
⁡
⁡
💡プレゼント付き！
ふわっと点滅するボタンの作り方
を実践しよう！
⁡
①HTMLを記述
②CSSを設定
③擬似要素をCSSで設定
④CSSアニメーションを設定
⑤ふわっと点滅するボタンの完成
⑥ボタンカスタマイズ方法解説
⁡
この投稿を保存して、何度も見返せるようにしてね✨
⁡
——————————————————————
・無料の女性限定コミュニティ「リスコミュ」を運営中
・Webデザインスクール「リスラボ」では自立するママを育成中！
・株式会社iris（Web制作会社）代表取締役
・初心者向けに超有益なWebデザインブログ（デザイン〜コーディング、WordPress化）を運営中
⁡
詳しくはプロフィールをチェックしてね！
@aichan_webdesign
⁡
#webデザイン
#webデザイナー
#ママWebデザイナー
#コーディング

💡これは凄い！写真の一部の色を残す
をPhotoshopで実践しよう！
⁡
①画像を用意する
②画像を白黒にする
③選択ツールで色を残したい部分を選択
④選択範囲をぼかす
⑤色を残したい部分をブラシツールでなぞる
⑥写真の一部だけ色を残した画像の完成
⁡
この投稿を保存して、何度も見返せるようにしてね✨
⁡
——————————————————————
・無料の女性限定コミュニティ「リスコミュ」を運営中
・Webデザインスクール「リスラボ」では自立するママを育成中！
・株式会社iris（Web制作会社）代表取締役
・初心者向けに超有益なWebデザインブログ（デザイン〜コーディング、WordPress化）を運営中
⁡
詳しくはプロフィールをチェックしてね！
@aichan_webdesign
⁡
#webデザイン
#webデザイナー
#ママWebデザイナー
#Photoshop
#画像加工

@aichan_webdesign ←好きな動物を教えてね🎁

コーディングのエラーが解決できなくて
困ってない？

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

💡 保存必須！何度でも修正できる地

💡 保存必須！何度でも修正できる地図
をlustratorで作成しよう！
⁡
① ペンツールで直線の地図を書く
②書いた直線を全選択して
　ブラシパネルで丸筆を適用
③アピアランスパネルから新規線を追加する
④追加した線をドラッグして一番下に移動させる
⑤塗りを白に、線の太さを太く設定する
⑥何度でも修正や移動ができる地図の完成
⑦おまけ
⁡
この投稿を保存して、何度も見返せるようにしてね✨
⁡
——————————————————————
・無料の女性限定コミュニティ「リスコミュ」を運営中
・Webデザインスクール「リスラボ」では自立するママを育成中！
・株式会社iris（Web制作会社）代表取締役
・初心者向けに超有益なWebデザインブログ（デザイン〜コーディング、WordPress化）を運営中
⁡
詳しくはプロフィールをチェックしてね！
@aichan_webdesign
⁡
#webデザイン
#webデザイナー
#ママWebデザイナー
#Illustrator

💡超簡単！一瞬で背景の色を変える

💡超簡単！一瞬で背景の色を変える
をPhotoshopで実践しよう！
⁡
①オブジェクト選択ツールで被写体を選択する
②右クリック→｢コピーしてレイヤーを作成｣
③元のレイヤーを選択してべた塗りを選択する
④背景の色を変更したい色味に設定
⑤レイヤーを乗算に設定する
⑥背景の色を変更した画像の完成
⁡
この投稿を保存して、何度も見返せるようにしてね✨
⁡
——————————————————————
・無料の女性限定コミュニティ「リスコミュ」を運営中
・Webデザインスクール「リスラボ」では自立するママを育成中！
・株式会社iris（Web制作会社）代表取締役
・初心者向けに超有益なWebデザインブログ（デザイン〜コーディング、WordPress化）を運営中
⁡
詳しくはプロフィールをチェックしてね！
@aichan_webdesign
⁡
#webデザイン
#webデザイナー
#ママWebデザイナー
#Photoshop
#画像加工

@aichan_webdesign ←「シーリングスタンプ」とコメントで🎁

デザイナーが知っておくべき素材の中の1つ
シーリングスタンプって知ってる？
今回は高級感のあるシーリングスタンプを
簡単に作る方法を紹介するよ！

「シーリングスタンプ」とコメントで、
紹介したシーリングスタンプのデザインデータが6つも入っているaiデータ
をプレゼントするよ🎁
⁡受け取って活用してみてね✨

⁡①楕円形ツールで正円を描く
②「ラフ」効果を適用する
③「アピアランスを分割」を適用する
④③に小さい正円を重ねてパスファインダーの「中マド」を選択
⑤「3Dとマテリアル」の「膨張」を適用をする
⑥縁の穴を埋める円を作成する
⑦使用したいベクターデータのイラストを重ねる
⑧イラストに「3Dとマテリアル」の「押し出し」を適用
⑨高級感のあるシーリングスタンプの完成

データが重くて扱いにくい場合は、
「アピアランスを分割」して画像化してね！

こんなの作って欲しい！

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

@aichan_webdesign ←豪華52大特典はハイラ

@aichan_webdesign ←豪華52大特典はハイライトをチェック

💡 知っておきたい！中央揃えパターン解説
を実践しよう！
⁡
①text-align: center;
②margin: 0 auto;
③display: inline-block;
④vertical-align: middle;
⑤display: flex;
⑥position: absolute; + margin: auto;
⑦transform: translate()
⁡
この投稿を保存して、何度も見返せるようにしてね✨
⁡
——————————————————————
・無料の女性限定コミュニティ「リスコミュ」を運営中
・Webデザインスクール「リスラボ」では自立するママを育成中！
・株式会社iris（Web制作会社）代表取締役
・初心者向けに超有益なWebデザインブログ（デザイン〜コーディング、WordPress化）を運営中
⁡
詳しくはプロフィールをチェックしてね！
@aichan_webdesign
⁡
#webデザイン
#webデザイナー
#ママWebデザイナー
#コーディング

@aichan_webdesign ←豪華52大特典はハイラ

@aichan_webdesign ←豪華52大特典はハイライトをチェック
⁡
⁡
💡これは使える！好きな写真のスタンプ風加工
をPhotoshopで実践しよう！
⁡
①スタンプにしたい画像と背景の画像を用意する
②被写体を選択しレイヤーマスクを追加する
③「フィルターギャラリー｣から
　「スタンプ｣を適用する
④「ブレンド条件」を調整して背景と馴染ませる
⑤ 「フレームツール」で切り取りテキストを入れる
⑥「カラーオーバーレイ」で色を変更する
⑦ 写真のスタンプ風加工の完成
⁡
この投稿を保存して、何度も見返せるようにしてね✨
⁡
——————————————————————
・無料の女性限定コミュニティ「リスコミュ」を運営中
・Webデザインスクール「リスラボ」では自立するママを育成中！
・株式会社iris（Web制作会社）代表取締役
・初心者向けに超有益なWebデザインブログ（デザイン〜コーディング、WordPress化）を運営中
⁡
詳しくはプロフィールをチェックしてね！
@aichan_webdesign
⁡
#webデザイン
#webデザイナー
#ママWebデザイナー
#Photoshop
#画像加工

2児のワンオペママWebデザイナーのビフォーアフター劇

⁡
@aichan_webdesign
⁡
————————————
⁡
今日はリスラボ0期性
みさみさに密着インタビューしてみたよ！

⁡リスラボ受講前→受講後で
どう変化していったのか？

どんな日常を過ごして、何を変えて結果を出したのか？などをインタビューしたので今、同じように悩んでる方の希望になってくれたら嬉しいです☺️

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

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

@aichan_webdesign ←豪華52大特典はハイラ

@aichan_webdesign ←豪華52大特典はハイライトをチェック
⁡
⁡
💡簡単可愛い！流体シェイプの作り方
をlustratorで作成しよう！
⁡
① ｢楕円形ツール｣で円を作成する
②「曲線ツール」で好きな形に整える
③「線パネル」を開く
④「破線」で数値を入力し「途切れ」を作る
⑤「新規効果｣の「変形」でパスを移動させる
⑥線を少しずらした流体シェイプフレームの完成
⑦おまけ
⁡
この投稿を保存して、何度も見返せるようにしてね✨
⁡
——————————————————————
・無料の女性限定コミュニティ「リスコミュ」を運営中
・Webデザインスクール「リスラボ」では自立するママを育成中！
・株式会社iris（Web制作会社）代表取締役
・初心者向けに超有益なWebデザインブログ（デザイン〜コーディング、WordPress化）を運営中
⁡
詳しくはプロフィールをチェックしてね！
@aichan_webdesign
⁡
#webデザイン
#webデザイナー
#ママWebデザイナー
#Illustrator

@aichan_webdesign ←豪華52大特典はハイラ

@aichan_webdesign ←豪華52大特典はハイライトをチェック
⁡
⁡
💡簡単お洒落！ぼかして丸く切り抜く方法
をPhotoshopで実践しよう！
⁡
①切りぬきたい画像を用意する
②ツールバーから「楕円形選択ツール」を選択
③オプションバーにある「ぼかし」の数値を上げる
④「楕円形選択ツール」で切り抜きたい部分を選択
⑤ 楕円形にレイヤーマスクをかける
⑥ぼかして丸く切り抜いた画像の完成
⁡
この投稿を保存して、何度も見返せるようにしてね✨
⁡
——————————————————————
・無料の女性限定コミュニティ「リスコミュ」を運営中
・Webデザインスクール「リスラボ」では自立するママを育成中！
・株式会社iris（Web制作会社）代表取締役
・初心者向けに超有益なWebデザインブログ（デザイン〜コーディング、WordPress化）を運営中
⁡
詳しくはプロフィールをチェックしてね！
@aichan_webdesign
⁡
#webデザイン
#webデザイナー
#ママWebデザイナー
#Photoshop
#画像加工

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

X

Tweets by mama_beyourself

関口愛里

株式会社iris代表取締役

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

instagram

aichan_webdesign

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

💡保存必須！誰でも使える生成パターン
をIllustratorで作成しよう！
⁡
①テキストツールで文字を入力する
②ウィンドウから生成パターン(Beta)を選択
③作りたいイメージのプロンプトを入力
④生成パターンの完成
⑤おまけー1
⑥おまけー2
⁡
この投稿を保存して、何度も見返せるようにしてね✨
⁡
——————————————————————
・無料の女性限定コミュニティ「リスコミュ」を運営中
・Webデザインスクール「リスラボ」では自立するママを育成中！
・株式会社iris（Web制作会社）代表取締役
・初心者向けに超有益なWebデザインブログ（デザイン〜コーディング、WordPress化）を運営中
⁡
詳しくはプロフィールをチェックしてね！
@aichan_webdesign
⁡
#webデザイン
#webデザイナー
#ママWebデザイナー
#Illustrator

💡これは面白い！誰でもできるラップ加工
をPhotoshopで実践しよう！
⁡
①レイヤーを追加し黒で塗りつぶす
② 「雲模様」のフィルターを選択し、
　歪みを適用する
③「フィルターギャラリー｣から
　「ラップ｣を適用する
④「レベル補正」の数値を調整する
⑤「色域指定」で「ハイライト」を選択する
⑥レイヤーを複製し描画モードを変更する
⑦ラップをかけたような加工の完成
⁡
この投稿を保存して、何度も見返せるようにしてね✨
⁡
——————————————————————
・無料の女性限定コミュニティ「リスコミュ」を運営中
・Webデザインスクール「リスラボ」では自立するママを育成中！
・株式会社iris（Web制作会社）代表取締役
・初心者向けに超有益なWebデザインブログ（デザイン〜コーディング、WordPress化）を運営中
⁡
詳しくはプロフィールをチェックしてね！
@aichan_webdesign
⁡
#webデザイン
#webデザイナー
#ママWebデザイナー
#Photoshop
#画像加工

←Webデザイナーにセンスはいらないは嘘？

今日は良く質問をいただく
Webデザイナーにセンスはいらない？に
フォーカスして私の考えを話してます！

重要なので最後まで見てね！

——————————————————————
・無料の女性限定コミュニティ「リスコミュ」を運営中
・Webデザインスクール「リスラボ」では自立するママを育成中！
・株式会社iris（Web制作会社）代表取締役
・初心者向けに超有益なWebデザインブログ（デザイン〜コーディング、WordPress化）を運営中
⁡
詳しくはプロフィールをチェックしてね！
@aichan_webdesign
⁡
#webデザイン
#webデザイナー
#ママWebデザイナー

💡知っておきたい！VSCode画面のおすすめ設定
を実践しよう！
⁡
①日本語化
②画面分割
③配色テーマ
④フォントサイズ
⑤インデントタブの幅
⑥自動保存
⑦ミニマップ
⁡
この投稿を保存して、何度も見返せるようにしてね✨
⁡
——————————————————————
・無料の女性限定コミュニティ「リスコミュ」を運営中
・Webデザインスクール「リスラボ」では自立するママを育成中！
・株式会社iris（Web制作会社）代表取締役
・初心者向けに超有益なWebデザインブログ（デザイン〜コーディング、WordPress化）を運営中
⁡
詳しくはプロフィールをチェックしてね！
@aichan_webdesign
⁡
#webデザイン
#webデザイナー
#ママWebデザイナー
#コーディング

💡簡単可愛い！チェキ風画像の作り方
をPhotoshopで実践しよう！
⁡
①「長方形ツール」を選択し長方形を描く
② 01で描いた長方形の角を丸くする
③ドロップシャドウの設定をする
④フレームにはめ込みたい写真を用意する
⑤「フレームツール」を選択し四角を描く
⑥写真を移動する
⑦チェキ風画像の完成
⁡
この投稿を保存して、何度も見返せるようにしてね✨
⁡
——————————————————————
・無料の女性限定コミュニティ「リスコミュ」を運営中
・Webデザインスクール「リスラボ」では自立するママを育成中！
・株式会社iris（Web制作会社）代表取締役
・初心者向けに超有益なWebデザインブログ（デザイン〜コーディング、WordPress化）を運営中
⁡
詳しくはプロフィールをチェックしてね！
@aichan_webdesign
⁡
#webデザイン
#webデザイナー
#ママWebデザイナー
#Photoshop
#画像加工

@aichan_webdesign ←好きな果物を教えてね🎁

もうコーディングをしなくても良いかも⁉︎

⁡Figmaで作成したデザインが
あるAIツールに共有リンクを貼るだけで
⁡自動でコードを生成してくれる😳

この便利なAIツールを知りたい方は、
「好きな果物」をコメントで教えてね！
教えてくれた方に🎁しちゃいます✨
⁡
ただ注意点があって…
生成されたコードは完璧ではないので
手直しする必要があるよ！

コーディングの知識はやっぱり必要💻

時短になることは間違いないから、
AIを活用して作業効率アップしていこう✨

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

💡 簡単お洒落！切り絵風画像の作り

💡 簡単お洒落！切り絵風画像の作り方
をIllustratorで作成しよう！
⁡
①素材を準備する
②背景を作成してロックし素材を配置する
③加工するために｢トレース｣し｢拡張｣する
④「ダイレクト選択ツール」で素材を抜き取る
⑤素材の色を「白」にする
⑥色を変更した素材に
　「ドロップシャドウ」をかける
⑦切り絵風画像の完成
⁡
この投稿を保存して、何度も見返せるようにしてね✨
⁡
——————————————————————
・無料の女性限定コミュニティ「リスコミュ」を運営中
・Webデザインスクール「リスラボ」では自立するママを育成中！
・株式会社iris（Web制作会社）代表取締役
・初心者向けに超有益なWebデザインブログ（デザイン〜コーディング、WordPress化）を運営中
⁡
詳しくはプロフィールをチェックしてね！
@aichan_webdesign
⁡
#webデザイン
#webデザイナー
#ママWebデザイナー
#Illustrator

💡これでOK！よくあるお悩み解決法
をPhotoshopで実践しよう！
⁡
①＜事象その1＞移動ツールで謎のマークが出た時
②＜解決法＞「自由変形ツール」のチェックを外す
③＜事象その2＞ブラシのポインタが十字になった時
④＜解決法＞CapsLockキー
（Shift ＋ Caps Lock キー）を押す
⑤＜事象その3＞基準点に数字を書いたようなマークが出た時
⑥＜解決法＞Option（Alt）＋クリックで削除
⁡
この投稿を保存して、何度も見返せるようにしてね✨
⁡
——————————————————————
・無料の女性限定コミュニティ「リスコミュ」を運営中
・Webデザインスクール「リスラボ」では自立するママを育成中！
・株式会社iris（Web制作会社）代表取締役
・初心者向けに超有益なWebデザインブログ（デザイン〜コーディング、WordPress化）を運営中
⁡
詳しくはプロフィールをチェックしてね！
@aichan_webdesign
⁡
#webデザイン
#webデザイナー
#ママWebデザイナー
#Photoshop

@aichan_webdesign ←リップの色を自由に変更する方法💄✨

今日のリールは
⁡
「リップの色を自由に変更する方法」について
解説してみたよ！

①「調整レイヤー」→「ベタ塗り」をクリックして一旦、変更したことがわかりやすい色に設定
②ベタ塗りレイヤーの描画モードを「乗算」に変更し、マスク部分をクリックした後、Command（Ctrl）＋Iを押してマスクを反転
③ブラシツールを選択して、画面上部のブラシの設定アイコンをクリックしてブラシを設定し、「不透明度」「流量」をそれぞれ100％に設定しておく
④マスク部分を選択した状態で、リップの部分をなぞって塗りつぶしていく
⑤レイヤーの右側をダブルクリックしてブレンド条件の「下になっているレイヤー」の
コマをoption（Alt）を押しながらクリックし２つに割れるのでそれぞれコマを調整
⑥ベタ塗りレイヤーのカラーの部分をダブルクリックし、リップを好きな色に変更
⑦「塗り」を少し下げて濃さを自然にしたら、リップの色を自由に変更した画像の完成

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