MENU

Home
My Blog
Community

rislabo Web Design Blog

Home
My Blog
Community

ホーム
My Blog

My Blog

HTML&CSS

もう迷わない！classの命名規則について

2024年6月4日
HTML&CSS

今更聞けない！レスポンシブデザインについて

2024年6月3日
HTML&CSS

ブロックレベル要素とインライン要素について

2024年6月3日
HTML&CSS

CSSとは？HTMLにスタイルを適用しよう

2024年6月1日
Illustrator

Illustratorレイヤー徹底解説

2024年5月31日
Illustrator

Illustratorでのトンボの使い方と役割

2024年5月28日

1...16 171819 20...28

フリーランス

ギガファイル便を使いこなそう！初心者向けのわかりやすい解説

2024年8月21日
Figma

インストールしたフォントをFigmaで使うための完全ガイド

2024年7月31日
Illustrator

Illustrator 便利な「スクリプト」の入れ方

2024年9月3日
Figma

Figmaのデータ共有について徹底解説！

2024年5月22日
Photoshop

初心者でも簡単！Photoshopの2倍書き出し完全ガイド

2024年10月5日
Photoshop

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

2024年11月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.