MENU

Home
My Blog
Community

rislabo Web Design Blog

Home
My Blog
Community

プログラミング

2023 2/12

プログラミング

2023年1月26日2023年2月12日

ホーム
プログラミング
プログラミング

プログラミング

デザイン
デザイン

検索

関口愛里

株式会社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

💡 これは凄い！画像の繋ぎ目をなじ

💡 これは凄い！画像の繋ぎ目をなじませる方法
をPhotoshopで作成しよう！
⁡
①画像と画像を繋ぎ合わせる方法
②グラデーションツールの設定
③2枚の画像にグラデーションをかける
④画像と画像を綺麗に繋ぎ合わせる加工の完成
⑤画像と背景を繋ぎ合わせる方法
⑥グラデーションをかける
⑦画像と背景の繋ぎ目をぼかした加工の完成
⁡
この投稿を保存して、何度も見返せるようにしてね✨
⁡
——————————————————————
・無料の女性限定コミュニティ「リスコミュ」を運営中
・Webデザインスクール「リスラボ」では自立するママを育成中！
・株式会社iris（Web制作会社）代表取締役
・初心者向けに超有益なWebデザインブログ（デザイン〜コーディング、WordPress化）を運営中
⁡
詳しくはプロフィールをチェックしてね！
@aichan_webdesign
⁡
#webデザイン
#webデザイナー
#ママWebデザイナー
#Photoshop
#画像加工

@aichan_webdesign ←顔を別人に変えることができるって知ってた？！

今日のリールは
⁡顔を別人に変えることができる合成方法を紹介します！

①「使用したい画像A」と「入れ替えたい顔の画像B」を用意する
②なげなわツールで、Bの顔の選択範囲を作る
③command(Ctrl)＋Cでコピー、command(Ctrl)＋Vで複製して元の画像Bは削除
④⁡顔の位置や大きさを合わせる
⑤command(Ctrl)を押しながら、Bの顔のレイヤーサムネイルをクリック
⑥Aのレイヤーの選択範囲を縮小する
⑦Aの選択範囲部分を削除する
⑧２つのレイヤーを選択しレイヤーを自動合成する
⑨合成方法をパノラマを選択する
⑩顔を別人に変えた合成写真の完成

使用したい画像の顔と、入れ替えたい顔の色味と角度が似たようなものを選ぶと
自然な感じに入れ替えられるよ！

保存しておいて、
何度も見返せるようにしておいてね✨
⁡

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

💡 簡単可愛い！クローバーの作り方

💡 簡単可愛い！クローバーの作り方
をIllustratorで作成しよう！
⁡
①長方形ツールで長方形を作成する
②ダイレクト選択ツールで角を丸くする
③「回転ツール｣で-９０度回転させる
④「パスファインダー」→「合体」を選択
⑤ 「回転ツール」で-45度回転させる
⑥ ｢オブジェクト｣→｢リピート｣
　→｢ラジアル｣を選択
⑦可愛いクローバーの完成
⁡
この投稿を保存して、何度も見返せるようにしてね✨
⁡
——————————————————————
・無料の女性限定コミュニティ「リスコミュ」を運営中
・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 ←お洒落な質感にする方法知ってる？

今日のリールはワンランクアップ！するお洒落な質感の塗り方を
紹介してみたよ！
⁡
①用意したイラストを複製
②パーツを選択し、command（Ctrl）＋Cでコピーして、command（Ctrl）＋Fで真上にペーストする
③透明パネルからマスクを作成し、質感をつけたいパーツを長方形で囲む
④マスクの色をスウォッチから白黒のグラデーションにする
⑤作成したマスクに粒状の効果をかける
⑥透明パネルの左側を選択し、色を変更
⑦お洒落な質感のイラストの完成

カラーパネルでcommand（Ctrl）キーを押しながら
スライダーを動かすと色味を保ったまま
濃度の変更ができるから便利だよ✨
⁡
⁡なんだか物足りないイラストも一気にお洒落になるから、
見返せるように保存して、活用してみてね！

-—————————————
AIRI SEKIGUCHI
⁡
お役立ち情報を発信するので
フォローしてね♡
" @aichan_webdesign "
⁡
⁡
ーやってることー
■現在270名を超える無料女性限定コミュニティ
（リスコミュ）を運営中
・女性限定の駆け出しデザイナーからベテランデザイナーの方までいます。
・勉強会や懇親会を月1.2回で開いてます
・興味ある方はお気軽に参加してね♡
→参加条件は最初にzoomで顔合わせ出来る方、女性、頑張りたい方、輪を乱さない方
⁡
⁡
参加方法は
①プロフィールに移動
②プロフィールのURL（LINE公式）をタップ
⁡
↓ ↓ ↓
ライン公式から友達追加して
『リスコミュ』と送ってね✨
⁡
もしくはInstagramのDMに
『リスコミュ』とメッセージしてね☺️
⁡
⁡
■ iris mama creative labo
リスラボ運営・代表
デザイン〜コーディングまで一貫して出来る強者ママを育成

💡超簡単！楕円形に沿う文字の作り方
をIllustratorで作成しよう！
⁡
①枠となる楕円形と沿わせる文字を準備する
②文字をアウトライン化する
③文字を「ブラシパネル」に
　ドラッグ＆ドロップする
④「アートブラシ」を選択しオプションを設定する
⑤ 「直線ツール」で楕円形に
　直線を引きブラシを適用する
⑥「線幅ツール」で線の幅を広げる
⑦楕円形に沿う文字の完成
⁡
この投稿を保存して、何度も見返せるようにしてね✨
⁡
——————————————————————
・無料の女性限定コミュニティ「リスコミュ」を運営中
・Webデザインスクール「リスラボ」では自立するママを育成中！
・株式会社iris（Web制作会社）代表取締役
・初心者向けに超有益なWebデザインブログ（デザイン〜コーディング、WordPress化）を運営中
⁡
詳しくはプロフィールをチェックしてね！
@aichan_webdesign
⁡
#webデザイン
#webデザイナー
#ママWebデザイナー
#Illustrator

💡 超リアル！自然に馴染むシール加

💡 超リアル！自然に馴染むシール加工
をPhotoshopで作成しよう！
⁡
①被写体の画像とシール素材を用意する
②シール素材を切り抜き、マスクをかける
③02の工程で作成したものを
　スマートオブジェクト化する
④被写体のレイヤーを複製して一番上に移動する
⑤04のレイヤーの描画モードを「乗算」に変更する
⑥クリッピングマスクをかけて不透明度を下げる
⑦自然に馴染むシールの完成
⁡
この投稿を保存して、何度も見返せるようにしてね✨
⁡
——————————————————————
・無料の女性限定コミュニティ「リスコミュ」を運営中
・Webデザインスクール「リスラボ」では自立するママを育成中！
・株式会社iris（Web制作会社）代表取締役
・初心者向けに超有益なWebデザインブログ（デザイン〜コーディング、WordPress化）を運営中
⁡
詳しくはプロフィールをチェックしてね！
@aichan_webdesign
⁡
#webデザイン
#webデザイナー
#ママWebデザイナー
#Photoshop
#画像加工

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

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

今日のリールは
⁡
Webデザイナーが知っておくべき
重要なことをお話ししてます！

と言うか知らないとまずいので必ず最後までチェックしてね！

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

💡知らなきゃやばい！セクショニン

💡知らなきゃやばい！
セクショニングタグ使い分け方
を実践しよう！
⁡
①セクショニングタグとは？
②<nav>タグ
③<section>タグ
④<article>タグ
⑤<aside>タグ
⑥<div>タグ
⑦使い方のまとめ
⁡
この投稿を保存して、何度も見返せるようにしてね✨
⁡
——————————————————————
・無料の女性限定コミュニティ「リスコミュ」を運営中
・Webデザインスクール「リスラボ」では自立するママを育成中！
・株式会社iris（Web制作会社）代表取締役
・初心者向けに超有益なWebデザインブログ（デザイン〜コーディング、WordPress化）を運営中
⁡
詳しくはプロフィールをチェックしてね！
@aichan_webdesign
⁡
#webデザイン
#webデザイナー
#ママWebデザイナー
#コーディング

💡これは凄い！一部が透明な文字の作り方
をPhotoshopで作成しよう！
⁡
①背景の上に画像を乗せ複製する
②写真の背景を削除する
③テキストを入力し複製する
④テキストの塗りを設定する
⑤テキストに枠線をつける
⑥テキストをリンクさせる
⑦一部分だけが透明な文字の完成
⁡
この投稿を保存して、何度も見返せるようにしてね✨
⁡
——————————————————————
・無料の女性限定コミュニティ「リスコミュ」を運営中
・Webデザインスクール「リスラボ」では自立するママを育成中！
・株式会社iris（Web制作会社）代表取締役
・初心者向けに超有益なWebデザインブログ（デザイン〜コーディング、WordPress化）を運営中
⁡
詳しくはプロフィールをチェックしてね！
@aichan_webdesign
⁡
#webデザイン
#webデザイナー
#ママWebデザイナー
#Photoshop
#画像加工

@aichan_webdesign ←「好きな絵文字」をコメントで🎁

⁡
「好きな絵文字」をコメントすると
紹介したグリッターのテクスチャが入ったpsdデータをプレゼント🎁
フォントにも、ロゴにも使いまわせるから絶対受け取ってね✨️

①暗い色の背景を用意する
②調整レイヤーから「ベタ塗り」を選択し白い背景にする
③「フィルター」→「ノイズ」→「ノイズを加える」を選択する
④「フィルター」→「ピクセレート」→「水晶」を選択する
⑤④のレイヤーを複製し、描画モードを乗算にしてから「パターンを定義」する
⑥⑤までに作成したレイヤーを非表示にしてテキストを入力する
⑦テキストに→「パターンオーバーレイ」にて⑤で定義したパターンを適用する
⑧「カラーオーバーレイ」で好みの色に変更して描画モードを焼き込み（リニア）に設定する
⑨テンプレ化できたラメ入り文字の完成

グリッターの色を変えたり、ロゴにも適用できるから
色々な素材でチャレンジしてみてね🙌

※ご自身の環境にプレゼントしたデータと同じグリッターのパターンを追加したい場合は、
プレゼントデータを開き「Glitter」の文字レイヤーを選択して
「レイヤースタイル」→「パターンオーバーレイ」を開き
データ内に添付している画像赤枠部分の「＋マーク」をクリックしてパターンを追加してね！
⁡
⁡
-—————————————
AIRI SEKIGUCHI
⁡
お役立ち情報を発信するので
フォローしてね♡
" @aichan_webdesign "
⁡
⁡
ーやってることー
■現在260名を超える無料女性限定コミュニティ
（リスコミュ）を運営中
・女性限定の駆け出しデザイナーからベテランデザイナーの方までいます。
・勉強会や懇親会を月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
⁡
#webデザイン
#webデザイナー
#ママWebデザイナー
#Illustrator

💡超簡単！立体感のあるエンボス文字
をPhotoshopで作成しよう！
⁡
①画像を用意する
②文字を打ち込む
③テキストレイヤーの描画モードを｢乗算｣にする
④ベベルとエンボスの数値を調整する
⑤ドロップシャドウの数値を調整する
⑥立体感のあるエンボス加工の文字が完成
⁡
この投稿を保存して、何度も見返せるようにしてね✨
⁡
——————————————————————
・無料の女性限定コミュニティ「リスコミュ」を運営中
・Webデザインスクール「リスラボ」では自立するママを育成中！
・株式会社iris（Web制作会社）代表取締役
・初心者向けに超有益なWebデザインブログ（デザイン〜コーディング、WordPress化）を運営中
⁡
詳しくはプロフィールをチェックしてね！
@aichan_webdesign
⁡
#webデザイン
#webデザイナー
#ママWebデザイナー
#Photoshop
#画像加工

@aichan_webdesign ←好きな「ポケモン」をコメントで教えてね🎁

今日のリールは
⁡
「HTML&CSSで動くモンスターボールを作る方法」について
解説してみたよ！

①border-radiusで赤い半円を作る
②ボールの境目の部分を作る
③擬似要素のbeforeを使って丸を重ね、ボールのボタンを作る
④border-radiusで白い半円を作る
⑤box-shadowを使って立体的な影を付ける
⑥@keyframesを使ってアニメーションを付ける
⑦動くモンスターボールの完成

簡単にCSSだけでアニメーションが付けられるよ！

今だけ、好きな「ポケモン」をコメントするだけで
動くモンスターボールのコードを全て記載したブログ記事を
🎁しちゃうよ✨

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

💡初心者必見！クラス名の命名ルール
を実践しよう！
⁡
①クラス名に使う文字について
②クラス名の頭文字に数字や記号を使わない
③クラスの命名規則は統一する
④単語を繋げない
⑤クラス名は分かりやすく
⁡
この投稿を保存して、何度も見返せるようにしてね✨
⁡
——————————————————————
・無料の女性限定コミュニティ「リスコミュ」を運営中
・Webデザインスクール「リスラボ」では自立するママを育成中！
・株式会社iris（Web制作会社）代表取締役
・初心者向けに超有益なWebデザインブログ（デザイン〜コーディング、WordPress化）を運営中
⁡
詳しくはプロフィールをチェックしてね！
@aichan_webdesign
⁡
#webデザイン
#webデザイナー
#ママWebデザイナー
#コーディング

💡超簡単！雑誌風の文字の入れ方を

💡超簡単！雑誌風の文字の入れ方
をPhotoshopで実践しよう！
⁡
①左右に余白のある画像を用意する
② ペンツールで文字を入れるスペースを作成
③横書き文字ツールを選択→
　パスの内側をクリック
④文字を入力する
⑤新規レイヤーを追加し、
　ブラシツールを選択する
⑥文章の視認性を上げるための
　下地を作成していく
⑦雑誌風に文字入れした画像の完成
⁡
この投稿を保存して、何度も見返せるようにしてね✨
⁡
——————————————————————
・無料の女性限定コミュニティ「リスコミュ」を運営中
・Webデザインスクール「リスラボ」では自立するママを育成中！
・株式会社iris（Web制作会社）代表取締役
・初心者向けに超有益なWebデザインブログ（デザイン〜コーディング、WordPress化）を運営中
⁡
詳しくはプロフィールをチェックしてね！
@aichan_webdesign
⁡
#webデザイン
#webデザイナー
#ママWebデザイナー
#Photoshop
#画像加工

@aichan_webdesign ←【リスラボ】とコメントすると詳細が送られます✨

今日はリスラボ2期のはるちゃんにインタビューしました☺️

皆さんと同じように、最初は悩みを抱えて
私のところに相談に来てくれたところから始まりました。

たった1つの決断で人生は大きく変わります😌

そんなちょっと先輩の声が今上手くいかなくて悩んでる方の力になれば嬉しいです✨️

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

💡保存必須！誰でも使える生成パターン
を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デザイナー

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

X

Tweets by mama_beyourself

関口愛里

株式会社iris代表取締役

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

instagram

aichan_webdesign

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

💡 これは凄い！画像の繋ぎ目をなじ

💡 これは凄い！画像の繋ぎ目をなじませる方法
をPhotoshopで作成しよう！
⁡
①画像と画像を繋ぎ合わせる方法
②グラデーションツールの設定
③2枚の画像にグラデーションをかける
④画像と画像を綺麗に繋ぎ合わせる加工の完成
⑤画像と背景を繋ぎ合わせる方法
⑥グラデーションをかける
⑦画像と背景の繋ぎ目をぼかした加工の完成
⁡
この投稿を保存して、何度も見返せるようにしてね✨
⁡
——————————————————————
・無料の女性限定コミュニティ「リスコミュ」を運営中
・Webデザインスクール「リスラボ」では自立するママを育成中！
・株式会社iris（Web制作会社）代表取締役
・初心者向けに超有益なWebデザインブログ（デザイン〜コーディング、WordPress化）を運営中
⁡
詳しくはプロフィールをチェックしてね！
@aichan_webdesign
⁡
#webデザイン
#webデザイナー
#ママWebデザイナー
#Photoshop
#画像加工

@aichan_webdesign ←顔を別人に変えることができるって知ってた？！

今日のリールは
⁡顔を別人に変えることができる合成方法を紹介します！

①「使用したい画像A」と「入れ替えたい顔の画像B」を用意する
②なげなわツールで、Bの顔の選択範囲を作る
③command(Ctrl)＋Cでコピー、command(Ctrl)＋Vで複製して元の画像Bは削除
④⁡顔の位置や大きさを合わせる
⑤command(Ctrl)を押しながら、Bの顔のレイヤーサムネイルをクリック
⑥Aのレイヤーの選択範囲を縮小する
⑦Aの選択範囲部分を削除する
⑧２つのレイヤーを選択しレイヤーを自動合成する
⑨合成方法をパノラマを選択する
⑩顔を別人に変えた合成写真の完成

使用したい画像の顔と、入れ替えたい顔の色味と角度が似たようなものを選ぶと
自然な感じに入れ替えられるよ！

保存しておいて、
何度も見返せるようにしておいてね✨
⁡

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

💡 簡単可愛い！クローバーの作り方

💡 簡単可愛い！クローバーの作り方
をIllustratorで作成しよう！
⁡
①長方形ツールで長方形を作成する
②ダイレクト選択ツールで角を丸くする
③「回転ツール｣で-９０度回転させる
④「パスファインダー」→「合体」を選択
⑤ 「回転ツール」で-45度回転させる
⑥ ｢オブジェクト｣→｢リピート｣
　→｢ラジアル｣を選択
⑦可愛いクローバーの完成
⁡
この投稿を保存して、何度も見返せるようにしてね✨
⁡
——————————————————————
・無料の女性限定コミュニティ「リスコミュ」を運営中
・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 ←お洒落な質感にする方法知ってる？

今日のリールはワンランクアップ！するお洒落な質感の塗り方を
紹介してみたよ！
⁡
①用意したイラストを複製
②パーツを選択し、command（Ctrl）＋Cでコピーして、command（Ctrl）＋Fで真上にペーストする
③透明パネルからマスクを作成し、質感をつけたいパーツを長方形で囲む
④マスクの色をスウォッチから白黒のグラデーションにする
⑤作成したマスクに粒状の効果をかける
⑥透明パネルの左側を選択し、色を変更
⑦お洒落な質感のイラストの完成

カラーパネルでcommand（Ctrl）キーを押しながら
スライダーを動かすと色味を保ったまま
濃度の変更ができるから便利だよ✨
⁡
⁡なんだか物足りないイラストも一気にお洒落になるから、
見返せるように保存して、活用してみてね！

-—————————————
AIRI SEKIGUCHI
⁡
お役立ち情報を発信するので
フォローしてね♡
" @aichan_webdesign "
⁡
⁡
ーやってることー
■現在270名を超える無料女性限定コミュニティ
（リスコミュ）を運営中
・女性限定の駆け出しデザイナーからベテランデザイナーの方までいます。
・勉強会や懇親会を月1.2回で開いてます
・興味ある方はお気軽に参加してね♡
→参加条件は最初にzoomで顔合わせ出来る方、女性、頑張りたい方、輪を乱さない方
⁡
⁡
参加方法は
①プロフィールに移動
②プロフィールのURL（LINE公式）をタップ
⁡
↓ ↓ ↓
ライン公式から友達追加して
『リスコミュ』と送ってね✨
⁡
もしくはInstagramのDMに
『リスコミュ』とメッセージしてね☺️
⁡
⁡
■ iris mama creative labo
リスラボ運営・代表
デザイン〜コーディングまで一貫して出来る強者ママを育成

💡超簡単！楕円形に沿う文字の作り方
をIllustratorで作成しよう！
⁡
①枠となる楕円形と沿わせる文字を準備する
②文字をアウトライン化する
③文字を「ブラシパネル」に
　ドラッグ＆ドロップする
④「アートブラシ」を選択しオプションを設定する
⑤ 「直線ツール」で楕円形に
　直線を引きブラシを適用する
⑥「線幅ツール」で線の幅を広げる
⑦楕円形に沿う文字の完成
⁡
この投稿を保存して、何度も見返せるようにしてね✨
⁡
——————————————————————
・無料の女性限定コミュニティ「リスコミュ」を運営中
・Webデザインスクール「リスラボ」では自立するママを育成中！
・株式会社iris（Web制作会社）代表取締役
・初心者向けに超有益なWebデザインブログ（デザイン〜コーディング、WordPress化）を運営中
⁡
詳しくはプロフィールをチェックしてね！
@aichan_webdesign
⁡
#webデザイン
#webデザイナー
#ママWebデザイナー
#Illustrator

💡 超リアル！自然に馴染むシール加

💡 超リアル！自然に馴染むシール加工
をPhotoshopで作成しよう！
⁡
①被写体の画像とシール素材を用意する
②シール素材を切り抜き、マスクをかける
③02の工程で作成したものを
　スマートオブジェクト化する
④被写体のレイヤーを複製して一番上に移動する
⑤04のレイヤーの描画モードを「乗算」に変更する
⑥クリッピングマスクをかけて不透明度を下げる
⑦自然に馴染むシールの完成
⁡
この投稿を保存して、何度も見返せるようにしてね✨
⁡
——————————————————————
・無料の女性限定コミュニティ「リスコミュ」を運営中
・Webデザインスクール「リスラボ」では自立するママを育成中！
・株式会社iris（Web制作会社）代表取締役
・初心者向けに超有益なWebデザインブログ（デザイン〜コーディング、WordPress化）を運営中
⁡
詳しくはプロフィールをチェックしてね！
@aichan_webdesign
⁡
#webデザイン
#webデザイナー
#ママWebデザイナー
#Photoshop
#画像加工

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

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

今日のリールは
⁡
Webデザイナーが知っておくべき
重要なことをお話ししてます！

と言うか知らないとまずいので必ず最後までチェックしてね！

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

💡知らなきゃやばい！セクショニン

💡知らなきゃやばい！
セクショニングタグ使い分け方
を実践しよう！
⁡
①セクショニングタグとは？
②<nav>タグ
③<section>タグ
④<article>タグ
⑤<aside>タグ
⑥<div>タグ
⑦使い方のまとめ
⁡
この投稿を保存して、何度も見返せるようにしてね✨
⁡
——————————————————————
・無料の女性限定コミュニティ「リスコミュ」を運営中
・Webデザインスクール「リスラボ」では自立するママを育成中！
・株式会社iris（Web制作会社）代表取締役
・初心者向けに超有益なWebデザインブログ（デザイン〜コーディング、WordPress化）を運営中
⁡
詳しくはプロフィールをチェックしてね！
@aichan_webdesign
⁡
#webデザイン
#webデザイナー
#ママWebデザイナー
#コーディング

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.

目次