MENU

Home
My Blog
Community

rislabo Web Design Blog

Home
My Blog
Community

ホーム
Webデザイン

Webデザイン– tag –

その他

Web制作に必須！デベロッパーツールとは

2024年6月16日
Illustrator

Illustrator 書き出し方法について

2024年6月15日
環境構築

VS Codeとは？初心者向けに徹底解説！

2024年6月15日
Photoshop

Photoshop クリッピングマスクについて

2024年6月15日
Illustrator

Illustrator ドロップシャドウの基礎と使い方

2024年6月14日
JavaScript

JavaScriptの準備と設定方法について

2024年6月14日

1...9 101112 13...24

検索

関口愛里

株式会社iris代表取締役

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

カテゴリ一覧

デザイン (107)
フリーランス (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 ←70s'風レトロぼかし加工を知ってる？

ただぼかすだけじゃなく、
光と影を意識するだけで、
70年代風レトロなぼかし加工を
作ることができるよ！

エモさを出したい時に、ぜひ使ってみてね✨
⁡
Webデザインを学ぶ女性のための完全無料コミュニティで、
仲間と一緒に成長しませんか？
気になる方はプロフィールをチェックしてね✨
⁡
⁡
-—————————————
AIRI SEKIGUCHI
⁡
お役立ち情報を発信するので
フォローしてね♡
" @aichan_webdesign "
⁡
⁡
ーお知らせー
■女性限定Webデザイン無料コミュニティ
リニューアルしました！
すでに200名を突破

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

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

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

お問い合わせはDMからお願いします📩
⁡
⁡
-—————————————
⁡
#webデザイン
#webデザイナー
#adobe
#adobePhotoshop
#Photoshop

💡 自分で作れる！とっても簡単メー

💡 自分で作れる！とっても簡単メールアイコン
をIllustratorで作成しよう！
⁡
① オブジェクトを用意する
② ２つのオブジェクトを重ねる
③ 四角形と三角形の角の形状を丸くする
④ 三角形の線を｢分割・拡張｣する
⑤ ｢前面のオブジェクトで型抜き｣を適用
⑥ メールアイコンの完成
⑦ おまけ
⁡
この投稿を保存して、何度も見返せるようにしてね✨
⁡
——————————————————————
・無料の女性限定コミュニティ「リスコミュ」を運営中
・Webデザインスクール「リスラボ」では自立するママを育成中！
・株式会社iris（Web制作会社）代表取締役
・初心者向けに超有益なWebデザインブログ（デザイン〜コーディング、WordPress化）を運営中
⁡
詳しくはプロフィールをチェックしてね！
@aichan_webdesign
⁡
#Adobe
#AdobeIllustrator
#Illustrator
#webデザイン
#webデザイナー

💡 これは使える！背景をぼかすポー

💡 これは使える！背景をぼかすポートレート加工
をPhotoshopで作成しよう！
⁡
① 画像を用意して通常レイヤーにする
② 画像を2つ複製しレイヤー名を変更する
③ ｢被写体｣のレイヤーを選択し被写体を選択する
④ レイヤーマスクをかける
⑤ ｢背景｣レイヤーを選択し被写体を削除する
⑥ ｢背景｣のレイヤーに
　｢ぼかし（ガウス）｣を適用する
⑦ 背景をぼかしたポートレート加工の完成
⁡
この投稿を保存して、何度も見返せるようにしてね✨
⁡
——————————————————————
・無料の女性限定コミュニティ「リスコミュ」を運営中
・Webデザインスクール「リスラボ」では自立するママを育成中！
・株式会社iris（Web制作会社）代表取締役
・初心者向けに超有益なWebデザインブログ（デザイン〜コーディング、WordPress化）を運営中
⁡
詳しくはプロフィールをチェックしてね！
@aichan_webdesign
⁡
#Adobe
#AdobePhotoshop
#Photoshop
#webデザイン
#webデザイナー

@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 ←歯を白くするテクニックを知ってる？

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

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

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

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

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

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

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

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

お問い合わせはDMからお願いします📩
⁡
⁡
-—————————————
⁡
#webデザイン
#webデザイナー
#adobe
#adobePhotoshop
#Photoshop

💡 これは使える！平面地図を３Dに加工
をIllustratorで作成しよう！
⁡
① 「直線ツール｣や「図形ツール｣で地図を作成
② ｢パスのアウトライン｣を選択し
　好きな角度に回転させる
③ 「拡大・縮小」パネルで数値を入力する
④ ｢３Dとマテリアル｣→｢３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 ←雲のような文字を簡単に作れるって知ってた？

飛行機雲のように空に文字を合成して
オシャレな画像を作りたい人必見✨

テキストを雲のように加工する方法を
やってみてね！

⁡
Webデザインを学ぶ女性のための完全無料コミュニティで、
仲間と一緒に成長しませんか？
気になる方はプロフィールをチェックしてね✨
⁡
-—————————————
AIRI SEKIGUCHI
⁡
お役立ち情報を発信するので
フォローしてね♡
" @aichan_webdesign "
⁡
⁡
ーやってることー
■現在280名を超える無料女性限定コミュニティ
（リスコミュ）を運営中
・女性限定の駆け出しデザイナーからベテランデザイナーの方までいます。
・勉強会や懇親会を月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 ←グラデを一瞬で作る方法

今日のリールは
⁡
＼知らなきゃ損！／
グラデを“秒速”で作る裏ワザを解説してます✨
→ 作業スピード爆上がりなので絶対見て！
ちょっとした時短テク、覚えておくと便利です◎
⁡
他にも便利なIllustratorの使い方を発信しているので、
フォローしてチェックしてね！

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

💡 躍動感UP！文字に動きをつける方法
を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 ←70s'風レトロぼかし加工を知ってる？

ただぼかすだけじゃなく、
光と影を意識するだけで、
70年代風レトロなぼかし加工を
作ることができるよ！

エモさを出したい時に、ぜひ使ってみてね✨
⁡
Webデザインを学ぶ女性のための完全無料コミュニティで、
仲間と一緒に成長しませんか？
気になる方はプロフィールをチェックしてね✨
⁡
⁡
-—————————————
AIRI SEKIGUCHI
⁡
お役立ち情報を発信するので
フォローしてね♡
" @aichan_webdesign "
⁡
⁡
ーお知らせー
■女性限定Webデザイン無料コミュニティ
リニューアルしました！
すでに200名を突破

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

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

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

お問い合わせはDMからお願いします📩
⁡
⁡
-—————————————
⁡
#webデザイン
#webデザイナー
#adobe
#adobePhotoshop
#Photoshop

💡 自分で作れる！とっても簡単メー

💡 自分で作れる！とっても簡単メールアイコン
をIllustratorで作成しよう！
⁡
① オブジェクトを用意する
② ２つのオブジェクトを重ねる
③ 四角形と三角形の角の形状を丸くする
④ 三角形の線を｢分割・拡張｣する
⑤ ｢前面のオブジェクトで型抜き｣を適用
⑥ メールアイコンの完成
⑦ おまけ
⁡
この投稿を保存して、何度も見返せるようにしてね✨
⁡
——————————————————————
・無料の女性限定コミュニティ「リスコミュ」を運営中
・Webデザインスクール「リスラボ」では自立するママを育成中！
・株式会社iris（Web制作会社）代表取締役
・初心者向けに超有益なWebデザインブログ（デザイン〜コーディング、WordPress化）を運営中
⁡
詳しくはプロフィールをチェックしてね！
@aichan_webdesign
⁡
#Adobe
#AdobeIllustrator
#Illustrator
#webデザイン
#webデザイナー

💡 これは使える！背景をぼかすポー

💡 これは使える！背景をぼかすポートレート加工
をPhotoshopで作成しよう！
⁡
① 画像を用意して通常レイヤーにする
② 画像を2つ複製しレイヤー名を変更する
③ ｢被写体｣のレイヤーを選択し被写体を選択する
④ レイヤーマスクをかける
⑤ ｢背景｣レイヤーを選択し被写体を削除する
⑥ ｢背景｣のレイヤーに
　｢ぼかし（ガウス）｣を適用する
⑦ 背景をぼかしたポートレート加工の完成
⁡
この投稿を保存して、何度も見返せるようにしてね✨
⁡
——————————————————————
・無料の女性限定コミュニティ「リスコミュ」を運営中
・Webデザインスクール「リスラボ」では自立するママを育成中！
・株式会社iris（Web制作会社）代表取締役
・初心者向けに超有益なWebデザインブログ（デザイン〜コーディング、WordPress化）を運営中
⁡
詳しくはプロフィールをチェックしてね！
@aichan_webdesign
⁡
#Adobe
#AdobePhotoshop
#Photoshop
#webデザイン
#webデザイナー

@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

Instagram でフォロー

カテゴリ一覧

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

タグ一覧

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

Home
プライバシーポリシー

© 2024 iris inc.