# Na2 factory ななファクトリー > 群馬県在住のフリーランスWebデザイナー。デザインやコーディングのWeb制作Tipsなど。 --- ## 固定ページ - [NewPost](https://na2-factory.com/newpost/): - [TOP Page](https://na2-factory.com/): - [プライバシーポリシー](https://na2-factory.com/na2-privacy-policy/): 本プライバシーポリシーは、Na2 fac... - [お問い合わせ](https://na2-factory.com/contact/): Na2Factory(ななファクトリー)... - [お問い合わせありがとうございます!](https://na2-factory.com/contact_thanks_page/): 折り返し自動返信メールを送らせて頂きまし... - [About](https://na2-factory.com/about_na2factory/): ご挨拶 初めまして! ご訪問頂き、ありが... --- --- ## 投稿 - [イラレでバースデーカードを作りました。Adobe Fireflyの構成参照も使ってみました。](https://na2-factory.com/work-illustrator-birthdaycard/): こんにちは〜。 実は3月27日はわたしに... - [2024年を振り返る](https://na2-factory.com/na2-2024-note/): このブログを更新するのが随分久しぶりにな... - [CocoonのSNSシェアボタンを縦表示に。まずはCSSだけでやってみよう](https://na2-factory.com/wp-cocoon-4/): こんにちは! 今回は当ブログのCocoo... - [LPのお問い合わせフォームにformrun(フォームラン)のコード型を実装してみました](https://na2-factory.com/html-tips-8/): こんにちは。 HTML/CSS/Java... - [HTML/CSSのデモサイト、作りました](https://na2-factory.com/html-demo-1/): こんにちは。 自分のポートフォリオサイト... - [SwiperのVersion9はloopモードのスライド数設定に注意](https://na2-factory.com/html-tips-7-2/): こんにちは。 Swiperのバージョンが... - [Figmaでホワイトデーのバナー作りました。JavaScriptでギャラリー風に。](https://na2-factory.com/org-banner-8/): こんにちは!ホワイトデーに合わせて、Fi... - [ブログデザイン、マイナーリニューアル。Cocoon子テーマカスタマイズ色々](https://na2-factory.com/wp-cocoon-3/): こんにちは!当ブログは無料のWordPr... - [画像をトリミングしてください!にobject-fit: coverとaspect-ratioで対応](https://na2-factory.com/html-tips-6/): こんにちは。 先日コーディング案件にて、... - [Browsersync+Gulpでブラウザの自動更新。(2023年1月現在)途中ハマったのでメモ](https://na2-factory.com/html-tips-5/): こんにちは。 静的サイトのコーディング案... - [2022年のクリスマスカード(サイト)](https://na2-factory.com/christmas2022/): こんにちは! かなり投稿の間が空いてしま... - [CSSであしらい作り。強調したいテキストの上にドットを付ける](https://na2-factory.com/html-tips-4/): こんにちは! 有難いことに制作会社様から... - [ブログデザイン、リニューアルしました](https://na2-factory.com/wp-cocoon-2/): こんにちは!このブログも早いもので開設か... - [LPのお問い合わせフォームに使える!PHP工房さんのフリーメールフォームを実装してみた](https://na2-factory.com/html-tips-3/): こんにちは! 今回は、LP(ランディング... - [WordPressローカルデバッグ環境作成2 Mac編:MAMPのMySQLのパスワード変更後、phpMyAdminエラーで困った話](https://na2-factory.com/wp-tips-3/): こんにちは。 今回は本当は先に書いたWi... - [WordPressローカルデバッグ環境作成①Windows編:VSCODE+Xdebug+XAMPP](https://na2-factory.com/wp-tips-2/): こんにちは。 今回はWordPress自... - [自主制作の記録!デザイン→コーディング→WordPress化までやってみる。【WordPress】完成したよ!是非見てね](https://na2-factory.com/wp-seisaku-4/): ご無沙汰しております? 自主制作サイトの... - [ホームページのアドレスはhttpsから始まってますか?httpからの場合はSSL化しよう!リダイレクトも設定しよう!](https://na2-factory.com/hp-ssl-tips/): こんにちは! 今回の内容は、初めてサイト... - [WordPress(ワードプレス)のセキュリティ対策、すぐにやりたい必須編](https://na2-factory.com/wp-tips-1/): こんにちは! 今回はWordPress(... - [自主制作の記録!デザイン→コーディング→WordPress化までやってみる。【コーディング編②】HTML完成、デモサイトを公開](https://na2-factory.com/wp-seisaku-3/): 自主制作サイトのコーディング編②になりま... - [HTML/CSS イラレで作ったSVGを外部ファイルで読み込み。色変更・レスポンシブ対応可能にするまでの手順](https://na2-factory.com/html-tips-2/): こんにちは! 現在作成している自主制作サ... - [自主制作の記録!デザイン→コーディング→WordPress化までやってみる。【コーディング編①】ひとまずトップページのレスポンシブ対応まで](https://na2-factory.com/wp-seisaku-2/): こんにちは! 自主制作サイトのコーディン... - [自主制作の記録!デザイン→コーディング→WordPress化までやってみる。【デザイン編①】シンプルなベーカリーサイト](https://na2-factory.com/wp-seisaku-1/): こんにちは! 昨年の8月から年末までの期... - [2022年もどうぞよろしく!イラレで梅結び(トラ配色)](https://na2-factory.com/org-banner-7/): 2022年、明けましておめでとうございま... - [クリスマスカード作成してみました!](https://na2-factory.com/org-banner-6/): こんにちは! 最近PC環境を新しくしまし... - [相棒PC(Win10:Dell)が動かなくなった日。原因は熱暴走だった?](https://na2-factory.com/pc-tips-dell/): ご無沙汰しております。 ブログ、やっと書... - [クラウドワークス&Adobeのセミナーに登壇してしまった!の話。](https://na2-factory.com/wk-cw-2/): こんにちは! 先月の末(21/7/31)... - [HTML/CSS ほんの一手間で劇的に変わる Chapter5 カスタマイズ完成!](https://na2-factory.com/html-study-5/): こんにちは! コーディング勉強第5弾にな... - [HTML/CSS 文字を90度回転、親要素の両端に配置!レスポンシブ対応](https://na2-factory.com/html-tips-1/): こんにちは! カスタマイズサイトのコーデ... - [インスタに正方形サイズの動画投稿する手順!AdobePremierePro使用](https://na2-factory.com/pr-insta-tips-1/): 2021/6/25 追記 ※Instag... - [HTML/CSS コーポレートサイトの求人ページをカスタマイズ!](https://na2-factory.com/html-study-4/): こんにちは! コーディング勉強第4弾にな... - [HTML/CSS ブログサイトのカスタマイズに挑戦!](https://na2-factory.com/html-study-3/): こんにちは! 先日の第2弾のカスタマイズ... - [HTML/CSS スクロールスナップに挑戦!レスポンシブ対応で苦戦!](https://na2-factory.com/html-study-2/): コーディングの勉強第2弾! 前回の予告通... - [HTML/CSSの勉強スタート!](https://na2-factory.com/html-study-1/): いよいよコーディングの勉強開始です! 今... - [イラレでもバナートレース30回達成!手順や手ごたえ等をまとめます](https://na2-factory.com/ai-banner-tr-summary/): フォトショでバナートレース(以下バナトレ... - [イラレでバナートレース #30『LOFT 文房具の会』LOFTで始まり、LOFTで終わる!](https://na2-factory.com/ai-banner-tr-30/): ついに! illustratorでのバナ... - [photoshop 雲模様でできることのまとめ! Vol.1](https://na2-factory.com/pt-tips-kumo1/): 2021年4月、記事をリニューアルしまし... - [イラレでバナートレース #29『フェリシモ haco』](https://na2-factory.com/ai-banner-tr-29/): illustratorでのバナトレ29回... - [イラレでバナートレース #28『台湾セール!』](https://na2-factory.com/ai-banner-tr-28/): illustratorでのバナトレ28回... - [イラレでバナートレース #27『Afternoon Tea』宝石のあしらいが可愛い](https://na2-factory.com/ai-banner-tr-27/): illustratorでのバナトレ27回... - [イラレでバナートレース #26『夜の動物園』](https://na2-factory.com/ai-banner-tr-26/): こんにちは! もう終了してしまったのです... - [イラレでバナートレース #25『静岡産業大学オープンキャンパス』](https://na2-factory.com/ai-banner-tr-25/): illustratorでのバナトレ25回... - [イラレでバナートレース #24『白潤』水滴とか色々難しかった](https://na2-factory.com/ai-banner-tr-24/): illustratorでのバナトレ24回... - [イラレでバナートレース #23『メルカリ』ペンツールの練習に!](https://na2-factory.com/ai-banner-tr-23/): illustratorでのバナトレ23回... - [イラレでバナートレース #22『KANAZAWA』](https://na2-factory.com/ai-banner-tr-22/): こんにちは! なんと、以前クラウドワーク... - [イラレでバナートレース #21『淡雪』](https://na2-factory.com/ai-banner-tr-21/): illustratorでのバナトレ21回... - [イラレでバナートレース #20『びゅう桜フォトキャンペーン』](https://na2-factory.com/ai-banner-tr-20/): illustratorでのバナトレ20回... - [イラレでバナートレース #19『天空のスケートリンク』](https://na2-factory.com/ai-banner-tr-19/): illustratorでのバナトレ19回... - [イラレでバナートレース #18『ココミスト』](https://na2-factory.com/ai-banner-tr-18/): illustratorでのバナトレ18回... - [イラレでバナートレース #17『まっしろノワール』](https://na2-factory.com/ai-banner-tr-17/): illustratorでのバナトレ17回... - [オリジナルデザイン #5『ホワイトデーのバナー』](https://na2-factory.com/org-banner-5/): こんにちは! オリジナルバナー作成第5弾... - [オリジナルデザイン #4『ひな祭りスイーツのバナー』](https://na2-factory.com/org-banner-4/): こんにちは! オリジナルバナー作成第4弾... - [独学・Webデザイン初心者がクラウドワークスのコンペに挑戦した記録](https://na2-factory.com/wk-cw-1/): こんにちは! 最近はクラウドワークスのコ... - [イラレでバナートレース #16『北海道地チーズ』](https://na2-factory.com/ai-banner-tr-16/): illustratorでのバナトレ16回... - [制作実績 #2『お客様サイトのアイキャッチ』](https://na2-factory.com/past-work-2/): こんにちは! 最近はクラウドワークスのコ... - [イラレでバナートレース #15『イオンモール東久留米の初売り』5本線ブラシで福の字!](https://na2-factory.com/ai-banner-tr-15/): illustratorでのバナトレ15回... - [オリジナルデザイン #3『共通テスト直前対策講座のバナー』](https://na2-factory.com/org-banner-3/): こんにちは! オリジナルバナー作成第3弾... - [イラレでバナートレース #14『お年玉キャンペーン』紅白のしめ縄を作る!](https://na2-factory.com/ai-banner-tr-14/): illustratorでのバナトレ14回... - [イラレでバナートレース #13『サンシャインシティ・クリスマス抽選会』](https://na2-factory.com/ai-banner-tr-13/): こんにちは! 2021年初投稿になります... - [制作実績 #1『成人式・振袖展示会 A4チラシ』](https://na2-factory.com/past-work-1/): こんにちは! 先日納品を終えた、初の制作... - [イラレでバナートレース #12『ヤマハの英語』](https://na2-factory.com/ai-banner-tr-12/): こんにちは! Twitterに思わず投稿... - [イラレでバナートレース #11『くいしんぼうのバターまつり』写真の切り抜き](https://na2-factory.com/ai-banner-tr-11/): こんにちは! 間が空いてしまいました? ... - [オリジナルデザイン #2『スノードームを作ろう!』](https://na2-factory.com/org-banner-2/): こんにちは! バナートレース活動に加えて... - [イラレでバナートレース #10『LOHACO歳末SALE』雪の結晶を作る!](https://na2-factory.com/ai-banner-tr-10/): こんにちは! illustratorでの... - [イラレでバナートレース #9『スマホアクセ専門店UniCASE』紙吹雪チャレンジ!](https://na2-factory.com/ai-banner-tr-9/): 寒くなってきましたね!! illustr... - [イラレでバナートレース #8『阪急百貨店福袋』格子と梅と桜のイラスト](https://na2-factory.com/ai-banner-tr-8/): こんにちは!illustratorでのバ... - [イラレでバナートレース #7『東京ミッドタウン』もこもこ円の可愛い背景](https://na2-factory.com/ai-banner-tr-7/): こんにちは!illustratorでのバ... - [オリジナルバナー制作 #1『クリスマスセール』](https://na2-factory.com/org-banner-1/): こんにちは! そろそろ自作のバナーを作っ... - [イラレでバナートレース #6『BEAMS送料無料』パスファインダーを使って作る!](https://na2-factory.com/ai-banner-tr-6/): こんにちは!illustratorでのバ... - [イラレでバナートレース #5『rednails』斜めストライプなど](https://na2-factory.com/ai-banner-tr-5/): こんにちは!illustratorでのバ... - [イラレでバナートレース #4『FREAK'S CLUB』ブレンド機能を使ってみる!](https://na2-factory.com/ai-banner-tr-4/): illustratorでのバナトレ4回目... - [イラレでバナートレース #3『USAGI-ONLINE』](https://na2-factory.com/ai-banner-tr-3/): illustratorでのバナトレ3回目... - [イラレでバナートレース #2『SHIPS』シンプルな図形の練習!](https://na2-factory.com/ai-banner-tr-2/): illustratorでのバナトレ2回目... - [イラレでバナートレース #1『LOFT』超シンプルなバナーでスタート!](https://na2-factory.com/ai-banner-tr-1/): illustratorの初心者用テキスト... - [photoshop初心者がバナートレース30本達成!躓きまくりの過程とこれからのこと](https://na2-factory.com/pt-banner-tr-summary/): photoshopでのバナートレースを始... - [photoshop バナートレース #30『ハーゲンダッツ』最後はデザートで!](https://na2-factory.com/pt-banner-tr-30/): ついに!photoshopでのバナトレ3... - [photoshop バナートレース #29『JAL CARD』夕焼け加工にチャレンジ](https://na2-factory.com/pt-banner-tr-29/): photoshopでのバナトレ29回目に... - [photoshop バナートレース #28『トリンプ クリスマスキャンペーン』](https://na2-factory.com/pt-banner-tr-28/): photoshopでのバナトレ28回目に... - [photoshop バナートレース #27『Bifestaメイク落とし』見事なコントラスト、光の演出](https://na2-factory.com/pt-banner-tr-27/): photoshopでのバナトレ27回目に... - [photoshop バナートレース #26『キャラメルマキアート』自分で背景をデコ!](https://na2-factory.com/pt-banner-tr-26/): photoshopでのバナトレ26回目に... - [photoshop バナートレース #25『MAKE KEEP MIST』メイク加工に挑戦!](https://na2-factory.com/pt-banner-tr-25/): photoshopでのバナトレ25回目に... - [サイト公開から約3か月。Googleアドセンス申請に合格!!](https://na2-factory.com/google_ad_pass/): ちょこちょことphotoshopでのバナ... - [photoshop バナートレース #24『GARAGE SALE at Shibuya』](https://na2-factory.com/pt-banner-tr-24/): photoshopでのバナトレ24回目に... - [photoshop バナートレース #23『星と乾杯キャンペーン』星空を作りたい!](https://na2-factory.com/pt-banner-tr-23/): photoshopでのバナトレ23回目に... - [photoshop バナートレース #22『Re:CENO』インテリアカタログ風に加工](https://na2-factory.com/pt-banner-tr-22/): photoshopでのバナトレ22回目に... - [photoshop バナートレース #21『広島の幸せスイーツ』](https://na2-factory.com/pt-banner-tr-21/): photoshopでのバナトレ21回目に... - [photoshop バナートレース #20『Mystery Deal』ボーダー・ドットのカラフルデザイン](https://na2-factory.com/pt-banner-tr-20/): photoshopでのバナトレ20回目に... - [photoshop バナートレース #19『LINE Pay』テキストをネオン風に](https://na2-factory.com/pt-banner-tr-19/): photoshopでのバナトレ19回目に... - [photoshop バナートレース #18『ドトール・スティックシュー』](https://na2-factory.com/pt-banner-tr-18-2/): photoshopでのバナトレ18回目に... - [photoshop バナートレース #17『ファミマカフェ・ソーダバニラ』](https://na2-factory.com/pt-banner-tr-17/): photoshopでのバナトレ17回目に... - [photoshop バナートレース #16『キットカット』やり直しました!](https://na2-factory.com/pt-banner-tr-16/): バナトレ16回目になります。 今回選んだ... - [photoshop バナートレース #15『瀬戸内のアートを巡る旅』波線を点線にする方法が分かった!](https://na2-factory.com/pt-banner-tr-15/): バナトレ15回目に突入です。 今回選んだ... - [photoshop バナートレース #14『ファミマカフェ・ロイヤルミルクティー』](https://na2-factory.com/pt-banner-tr-14/): こんにちは! ななふです。 【バナートレ... - [photoshop バナートレース #13『カゴメ野菜生活100』水滴、絵の具っぽい加工等難易度高し](https://na2-factory.com/pt-banner-tr-13/): こんにちは! ななふです。 【バナートレ... - [photoshop バナートレース #12『SAPPORO』夜空と花火を作る!](https://na2-factory.com/pt-banner-tr-12/): こんにちは! ななふです。 【バナートレ... - [photoshop バナートレース #11『資生堂』](https://na2-factory.com/pt-banner-tr-11/): こんにちは! ななふです。 【バナートレ... - [photoshop バナートレース #10『ジョージア』ミルククラウンにたどり着く](https://na2-factory.com/pt-banner-tr-10/): こんにちは! ななふです。 ついに...... - [photoshop バナートレース #9『LUMINE』水しぶきを再現したい!](https://na2-factory.com/pt-banner-tr-9/): こんにちは! ななふです。 【バナートレ... - [photoshop バナートレース #8 『2020 SUMMER FINAL SALE』](https://na2-factory.com/pt-banner-tr-8/): こんにちは! ななふです。 【バナートレ... - [photoshop バナートレース #7 『フェリシモ』人物の切り抜きに挑戦!](https://na2-factory.com/pt-banner-tr-7/): こんにちは! ななふです。 【バナートレ... --- # # Detailed Content ## 固定ページ ### NewPost - Published: 2022-08-15 - Modified: 2022-08-15 - URL: https://na2-factory.com/newpost/ --- ### TOP Page - Published: 2022-08-15 - Modified: 2022-08-15 - URL: https://na2-factory.com/ --- ### プライバシーポリシー - Published: 2020-07-17 - Modified: 2025-04-18 - URL: https://na2-factory.com/na2-privacy-policy/ 本プライバシーポリシーは、Na2 factory(https://www. na2-factory. com/)(以下、「当サイト」とします。)の各種サービス(当サイトによる情報提供、各種お問合せの受付等)において、当サイトの訪問者(以下、「訪問者」とします。)の個人情報もしくはそれに準ずる情報を取り扱う際に、当サイトが遵守する方針を示したものです。 1.基本方針 当サイトは、個人情報の重要性を認識し、個人情報を保護することが社会的責務であると考え、個人情報に関する法令を遵守し、当サイトで取扱う... --- ### お問い合わせ - Published: 2020-07-17 - Modified: 2025-05-10 - URL: https://na2-factory.com/contact/ Na2Factory(ななファクトリー)へのご訪問ありがとうございます。 ブログ記事へのリンクや バナー制作・サイト制作について ご相談、ご質問がありましたら以下のフォームからご連絡下さい。 できる限り迅速に対応させて頂きます。   尚、当サイトのプライバシーポリシーを送信前にご確認下さい。 ※ 送信後、自動返信メールが届くようになっております ※   --- ### お問い合わせありがとうございます! - Published: 2020-07-17 - Modified: 2024-03-05 - URL: https://na2-factory.com/contact_thanks_page/ 折り返し自動返信メールを送らせて頂きました。 もし届かないようでしたら、入力されたメールアドレスの間違いか、迷惑メールフォルダに入っている可能性がございますので、ご確認をお願いいたします。 今後ともNa2 factory (ななファクトリー)をよろしくお願いいたします。 --- ### About - Published: 2020-06-17 - Modified: 2025-02-12 - URL: https://na2-factory.com/about_na2factory/ ご挨拶 初めまして! ご訪問頂き、ありがとうございます。 ななふ ()と申します。 当サイト名 ”Na2 factory”ですが”なな ふぁくとりー” と読んでいただければと思います。 ブログの更新をしていない間は、主にtwitterに近況報告しております。宜しかったら是非、見てみてください!(フォローとても励みになります!) Tweets by na2factory 著者(ななふ)について 基本情報 群馬県在住の40代主婦です。 2022年4月現在、旦那と中学生女子との3人暮らしです。 好きな... --- --- --- ## 投稿 ### イラレでバースデーカードを作りました。Adobe Fireflyの構成参照も使ってみました。 - Published: 2025-03-28 - Modified: 2025-03-28 - URL: https://na2-factory.com/work-illustrator-birthdaycard/ - カテゴリー: Design, works - タグ: illustrator こんにちは〜。 実は3月27日はわたしにとって特別な日です。 我が子の誕生日なんです。^^ 早いもので、もう15歳。4月からは高校生になります。 無事に志望校合格、高校はかなり自宅から遠いんだけど、自転車通学がんばるつもりみたいです。 そんなわけで誕生日を祝うイラストを作ってみたので、簡単にご紹介させてください。 イラストレータで作成 AdobeのIllustrator(イラストレータ:以降イラレ)で作りました! 参考動画を見て手動で作ったほか、イラレで使える生成AI(これもAdobeFiref... --- ### 2024年を振り返る - Published: 2024-12-29 - Modified: 2025-03-28 - URL: https://na2-factory.com/na2-2024-note/ - カテゴリー: Design, Other このブログを更新するのが随分久しぶりになってしまいました。 早いもので2024年ももう終了間近。 この一年を振り返っておきたいと思います。 Cocoonのスキン、grayishが広く認知された・・・かも 2023年にWordPressテーマCocoonのスキン、grayishを制作し、同11月にCocoonに同梱していただいたことで、 ななふ = Cocoonのgrayishの作者 と認知していただいたような気がいたします。 今やgrayishのマニュアルサイトのほうが、このブログよりはるかにア... --- ### CocoonのSNSシェアボタンを縦表示に。まずはCSSだけでやってみよう - Published: 2023-06-17 - Modified: 2023-06-17 - URL: https://na2-factory.com/wp-cocoon-4/ - カテゴリー: WordPress - タグ: cocoon, WordPress こんにちは! 今回は当ブログのCocoonのカスタマイズで、詳しく記事にしていなかった「SNSフォローボタンを縦表示」について書いておきたいと思います。 方法は結構単純で、簡単です。同じように縦表示にしてみたい方、是非試してみてください。 注意点は、PCデザインから画面幅が小さく変化していく時の表示オフのタイミングぐらいでしょうか(^^)他、ヘッダーに高さのあるデザインの場合、固定表示するSNSボタンと被る可能性があります。 なお、当ブログのカスタマイズでは画面幅での表示オフとは別に、投稿表示中... --- ### LPのお問い合わせフォームにformrun(フォームラン)のコード型を実装してみました - Published: 2023-06-07 - Modified: 2025-01-24 - URL: https://na2-factory.com/html-tips-8/ - カテゴリー: HTML/CSS - タグ: Tips, コーディング こんにちは。 HTML/CSS/JavaScriptで制作したLP(ランディングページ)のデモサイトにて、お問い合わせフォームをformrun(フォームラン)のコード型で実装してます。※デモサイトではキャンペーンエントリーの入力フォームになっていますが、お問い合わせフォームとして説明させてください? ↓デモサイトの詳細はこちらから https://demo-chocolatie-n. na2-factory. com/index. html お問い合わせフォームの実装には色々な選択肢がありますが... --- ### HTML/CSSのデモサイト、作りました - Published: 2023-06-01 - Modified: 2025-02-07 - URL: https://na2-factory.com/html-demo-1/ - カテゴリー: HTML/CSS - タグ: オリジナルデザイン こんにちは。 自分のポートフォリオサイトに載せるためのデモサイトを制作しております。 まず第一弾のHTML/CSS/JavaScriptでの静的サイト完成・・・!したので先行公開したいと思います! デモサイトやポートフォリオの制作背景としては、制作会社と業務委託契約を結び、WordPressやコーディングの納品実績はあるものの、これらは契約上自分の実績として公開できない点にあります。 また、お客様のご意見を直接伺って制作することが難しかったので、そこも何とかしたいと思っておりました。 今後は制作... --- ### SwiperのVersion9はloopモードのスライド数設定に注意 - Published: 2023-04-14 - Modified: 2024-02-22 - URL: https://na2-factory.com/html-tips-7-2/ - カテゴリー: HTML/CSS - タグ: Swiper, Tips, コーディング こんにちは。 Swiperのバージョンが8から9にアップデートされていますね! 公式サイトにバージョン8から9への移行ガイドが載っているのですが、実際に使ってみて「んんん??」となったloopモードでのスライド数設定について書いておきたいと思います。 ↓Swiper9への移行ガイドはこちら(公式サイト) https://swiperjs. com/migration-guide-v9 ※本記事ではSwiperとは?や、基本的使用方法については割愛させていただきます。外部サイトの記事が大変参考にな... --- ### Figmaでホワイトデーのバナー作りました。JavaScriptでギャラリー風に。 - Published: 2023-03-16 - Modified: 2024-10-03 - URL: https://na2-factory.com/org-banner-8/ - カテゴリー: Design, works - タグ: Figma, オリジナルデザイン こんにちは!ホワイトデーに合わせて、Figmaを使ってバナーを作ってみました。超久しぶりにインスタに投稿して達成感がありました(^^) 今までWebデザインはAdobePhotoshopやXDを使用して作成していたのですが、XDはもう主流ではなくなる事が分かってきたので、今後はFigmaを使えたほうがいいだろうと思い練習中です!Figmaは無料で使えるプラグインが充実しているとの事で、色々な参考記事を見ながら機能を試してみました。 写真の加工やこだわったあしらいを作成するには、AdobePhot... --- ### ブログデザイン、マイナーリニューアル。Cocoon子テーマカスタマイズ色々 - Published: 2023-03-10 - Modified: 2023-03-10 - URL: https://na2-factory.com/wp-cocoon-3/ - カテゴリー: WordPress - タグ: cocoon, WordPress, オリジナルデザイン こんにちは!当ブログは無料のWordPressテーマ「Cocoon」をカスタマイズして使ってます。 https://wp-cocoon. com/ 「Cocoon」は元々実装されている機能が豊富で、テーマのテンプレートファイル(php)を日々勉強がてら検証させてもらってます。Web制作にも大いに役立っており感謝しております。 今回は前回のリニューアルで対応できていなかったところや、変えてみたい、やってみたいと思っていた部分を反映させてみました。 暫定処置な部分もありますが良かったらご覧になってく... --- ### 画像をトリミングしてください!にobject-fit: coverとaspect-ratioで対応 - Published: 2023-02-15 - Modified: 2024-02-22 - URL: https://na2-factory.com/html-tips-6/ - カテゴリー: HTML/CSS - タグ: Tips, コーディング こんにちは。 先日コーディング案件にて、タブレット、スマートフォン用のデザインを受け取った際、指示書にこんな感じの内容が書いてありました。 「スマートフォン版では、タブレット版の画像をトリミングしてください」 トリミング・・・ 一瞬どうするんだっけ?と迷いましたが、 CSSでobject-fit: coverとaspect-ratioの指定をすることで対応できました。(※IEは非対応です) 具体的な方法を忘れないようにメモしておきたいと思います。 支給されたデザインのシンプル版 実際のデザインは... --- ### Browsersync+Gulpでブラウザの自動更新。(2023年1月現在)途中ハマったのでメモ - Published: 2023-01-18 - Modified: 2023-02-16 - URL: https://na2-factory.com/html-tips-5/ - カテゴリー: HTML/CSS - タグ: Tips, コーディング こんにちは。 静的サイトのコーディング案件を数回こなしまして、もっと効率よく制作したいと思うようになりました。 目標としてタスクランナーGulpを使い、minify等の自動化、最終的にEJSでヘッダーやフッターを共通化して制作できるようにしたいです。 EJSを知った記事はこちら↓(有名なはにわまんさんの記事) https://haniwaman. com/ejs/ 目標達成に向けてまずはGulpを使えるようにします!↓Gulp公式サイトは以下になります。 https://gulpjs. com/... --- ### 2022年のクリスマスカード(サイト) - Published: 2022-12-27 - Modified: 2023-02-16 - URL: https://na2-factory.com/christmas2022/ - カテゴリー: HTML/CSS こんにちは! かなり投稿の間が空いてしまいました・・・ 今年度後半は、制作会社様から案件をいただけることになったので、案件対応を優先で過ごしてきました。(案件対応で色々とあり、かなり疲労してます? ) 気が付いたらもう年末! 一応? クリスマス中にさささっと作ったクリスマスカード風サイトがあるので、簡単にですがご紹介させていただきます。 お気に入りのCodePen あまり時間もないので、一からデザイン~コーディングというのはできなかったので、 最近のお気に入りのCodePenをベースに作ってみま... --- ### CSSであしらい作り。強調したいテキストの上にドットを付ける - Published: 2022-10-04 - Modified: 2022-10-04 - URL: https://na2-factory.com/html-tips-4/ - カテゴリー: HTML/CSS - タグ: Tips, コーディング こんにちは! 有難いことに制作会社様からWeb制作のお仕事を頂けることになり、案件も続いて余裕がない日々を送っております? そんな中、自分でデザイン・コーディングした案件で、強調したいテキストの上にドットを付けた部分がありました。 デザイン中はデザイン脳といいますか・・・強調したい部分を如何に目立つようにできるか、に焦点を置いて作ってしまうのですが コーディング段階になると「ん?どう実装するんだ・・・」となる事がシバシバ? いつもの通り参考記事を探しまくって、素敵な実装方法を見つける事ができまし... --- ### ブログデザイン、リニューアルしました - Published: 2022-08-18 - Modified: 2023-02-16 - URL: https://na2-factory.com/wp-cocoon-2/ - カテゴリー: WordPress - タグ: cocoon, WordPress, オリジナルデザイン こんにちは!このブログも早いもので開設から2年。 最近のWordPressやコーディングの勉強の成果の一つとして、使用している無料テーマ「Cocoon」の子テーマをリニューアルすることにしました! https://wp-cocoon. com/ もともと「Cocoon」はカスタマイズしやすいように作られているので、 構造を理解していればもっと無駄なくできただろうな〜と思うのですが・・・ 「Cocoon」の中身がまだまだ理解しきれていないので、今後も勉強しつつ改良を重ねていきたいと思います。 コン... --- ### LPのお問い合わせフォームに使える!PHP工房さんのフリーメールフォームを実装してみた - Published: 2022-07-30 - Modified: 2023-06-22 - URL: https://na2-factory.com/html-tips-3/ - カテゴリー: HTML/CSS - タグ: Tips, コーディング こんにちは! 今回は、LP(ランディングページ)などの静的なサイト制作の際に使えそうな、フリーのメールフォームについてです。 過去に制作したデモLPに、PHP工房さんの配布されているメールフォームを使ってみました。 実装の難易度は高くなく、デザインのカスタマイズも自由にできますので実際の案件に使えると思います! お問い合わせフォームをどう作るか悩む LPにお問い合わせフォームが必要な場合、どう実装するのか結構悩みどころですよね。 WordPressで作ると最初から決まっている場合はプラグインを使... --- ### WordPressローカルデバッグ環境作成2 Mac編:MAMPのMySQLのパスワード変更後、phpMyAdminエラーで困った話 - Published: 2022-06-02 - Modified: 2023-06-27 - URL: https://na2-factory.com/wp-tips-3/ - カテゴリー: WordPress - タグ: Mac, MAMP, Tips, WordPress, コーディング こんにちは。 今回は本当は先に書いたWindowsでのWordPressローカルデバッグ環境をMacでも作ったよ! の話を書くつもりだったのですが・・・・ ふと、出来心でMAMPのMySQLのrootのパスワードが rootであることが気にかかって、別のパスワードに変更したところ・・・ phpMyAdminで上記のエラー画面になってしばらく時間を無駄にした話を書いておきます・・・ もしかして同じエラーで苦しんでいる方がいるかもしれないので、エラーメッセージをテキストでも貼り付け。 検索結果でお力... --- ### WordPressローカルデバッグ環境作成①Windows編:VSCODE+Xdebug+XAMPP - Published: 2022-06-02 - Modified: 2023-02-16 - URL: https://na2-factory.com/wp-tips-2/ - カテゴリー: WordPress - タグ: Tips, Windows, WordPress, コーディング こんにちは。 今回はWordPress自作テーマのローカルデバッグ環境の構築についてです。 Visual Studio Code(以下 VSCODEとします)がIDE(統合開発環境)であるということは知っていても、 ちょっと便利なコードエディタとしてしか使えていない状況でした。 が、今回の環境を整えたことによってVSCODEなしでは もう生きていけない(大袈裟)ぐらいの存在になりました(^^; 私の使用しているローカル環境はXAMPP(Windows)、MAMP(Mac)なので、 これらとVSC... --- ### 自主制作の記録!デザイン→コーディング→WordPress化までやってみる。【WordPress】完成したよ!是非見てね - Published: 2022-05-27 - Modified: 2025-02-07 - URL: https://na2-factory.com/wp-seisaku-4/ - カテゴリー: Demoベーカリーコルネ, HTML/CSS, WordPress - タグ: WordPress ご無沙汰しております? 自主制作サイトのWordPress化が一応完成しました! Demoサイトへはバナーをクリック! 早速、以下のリンクからご覧になっていただけたら嬉しいです。 動作確認 PC : Windows Google Chrom Microsoft Edge Firefox PC : Mac Google Chrom Safari Firefox 動作確認:SP iphone7,SE デモサイト簡単紹介 架空のパン屋さんのデモサイトです。 目玉として、「食パン受け取り予約サービス」が... --- ### ホームページのアドレスはhttpsから始まってますか?httpからの場合はSSL化しよう!リダイレクトも設定しよう! - Published: 2022-04-14 - Modified: 2023-03-13 - URL: https://na2-factory.com/hp-ssl-tips/ - カテゴリー: HTML/CSS, WordPress, ブログ初期設定 - タグ: WordPress, セキュリティ対策 こんにちは! 今回の内容は、初めてサイト(ブログやホームページ)を持つ方に読んで頂けたらいいな! と思って書いてます。 ななふ WordPressで初めてのブログ開設!ワクワク! ・・・その前にURL(アドレス)チェック! ホームページを公開する前に、URLがどうなっているか確認しておきたいですね!! 例えば当ブログの場合は https://na2-factory. com/ https://から始まるアドレスになっています。 現在公開されているサイトのURLはほとんどこのケースなのでは、、、と... --- ### WordPress(ワードプレス)のセキュリティ対策、すぐにやりたい必須編 - Published: 2022-04-01 - Modified: 2023-09-14 - URL: https://na2-factory.com/wp-tips-1/ - カテゴリー: WordPress, ブログ初期設定 - タグ: WordPress, セキュリティ対策 こんにちは! 今回はWordPress(ワードプレス)のセキュリティ対策についてです。 自分が新しい環境を作る際にすぐにやる、必須設定項目を書いておきたいと思います。 ダッシュボードで変更可能な設定と、プラグインを使う設定があります! ダッシュボードで変更できる対策 ①パスワードを強力な物へ変更 ここはあえて書く必要はないのかもですが・・・ ダッシュボードで提案される強力な物に変えておきます。メモを取る事を忘れずに? ↓ダッシュボードの「ユーザー」で新しいパスワードを設定できます。 ②ユーザー名... --- ### 自主制作の記録!デザイン→コーディング→WordPress化までやってみる。【コーディング編②】HTML完成、デモサイトを公開 - Published: 2022-03-11 - Modified: 2023-06-29 - URL: https://na2-factory.com/wp-seisaku-3/ - カテゴリー: Demoベーカリーコルネ, HTML/CSS, WordPress - タグ: XD, オリジナルデザイン, コーディング 自主制作サイトのコーディング編②になります。 予定していたデザインのコーディングが完了しました!(本番はこの後のWordPress化なので、まだ無いページあります? ) 今まで実装した事のない機能も、できるだけ挑戦してみたので時間かかってしまいました。 コーディングってやっぱり一筋縄ではいきませんね。 各種ブラウザで意図した動作をしているのか? 自分の持っている環境ではできる限り動作確認しましたが、全ては見切れないので何か不具合があったら是非教えて頂ければ幸いです。 尚、IE11はサポート対象外... --- ### HTML/CSS イラレで作ったSVGを外部ファイルで読み込み。色変更・レスポンシブ対応可能にするまでの手順 - Published: 2022-03-03 - Modified: 2023-06-22 - URL: https://na2-factory.com/html-tips-2/ - カテゴリー: HTML/CSS - タグ: SVG, Tips, コーディング こんにちは! 現在作成している自主制作サイトでイラレで自作したロゴのSVGファイルを外部ファイル形式で読み込み、色やサイズを変える手順についてまとめたいと思います。 実現にあたりGoogle検索で色々な方の記事を参考にさせて頂きました。 参考記事を書いて下さった皆様、勝手にですがお礼を申し上げます。ありがとうございました また、この方法では実装後の表示確認をローカル環境でしようとすると(ローカル環境での確認:サーバーを通さず、自分のPCでブラウザで確認する事とさせてください)ブラウザのセキュリテ... --- ### 自主制作の記録!デザイン→コーディング→WordPress化までやってみる。【コーディング編①】ひとまずトップページのレスポンシブ対応まで - Published: 2022-02-10 - Modified: 2023-06-29 - URL: https://na2-factory.com/wp-seisaku-2/ - カテゴリー: Demoベーカリーコルネ, HTML/CSS, WordPress - タグ: illustrator, photoshop, XD, オリジナルデザイン こんにちは! 自主制作サイトのコーディング編①になります。 今回はTOPページのコーディングが進んだので、レスポンシブ対応までを記事に残しておきますー! TOPページのデザイン SP(スマホ)とPC用に作ってます。 それぞれ、赤枠の部分のデザインをコーディングしました! ヒーロー画像について TOPページは他のページよりも凝った演出を入れてみたいと思ってましてヘッダーのすぐ下にあるヒーロー画像について、アニメーション採用してます。 ヒーロー画像は ①メインの食パンの写真②お店の中でパンが並ぶ写真... --- ### 自主制作の記録!デザイン→コーディング→WordPress化までやってみる。【デザイン編①】シンプルなベーカリーサイト - Published: 2022-01-19 - Modified: 2023-06-29 - URL: https://na2-factory.com/wp-seisaku-1/ - カテゴリー: Demoベーカリーコルネ, HTML/CSS, WordPress - タグ: illustrator, photoshop, XD, オリジナルデザイン こんにちは! 昨年の8月から年末までの期間、WordPressの実践セミナーに参加していました! が、セミナー中に自分で実際に組み上げるところまで行けなかったので、復習を兼ねてサイトのデザイン・コーディング・Wordpress化までの自主制作をしたいと思います。 自主制作なので実際のお客様はいらっしゃいませんが本当に一つのサイト制作を任せて頂いたつもりで作業していきたいと思います。(^^)/ サイトのデザインだけは昨年から少しずつ進めていたので、最初にデザイン編として書いていきます! 架空のベー... --- ### 2022年もどうぞよろしく!イラレで梅結び(トラ配色) - Published: 2022-01-09 - Modified: 2022-01-13 - URL: https://na2-factory.com/org-banner-7/ - カテゴリー: Design, works - タグ: illustrator, オリジナルデザイン 2022年、明けましておめでとうございます! (だいぶお正月から空いてますが・・・汗) 新年一回目の投稿はお正月らしく和のデザインから〜( ^∀^) アイキャッチはTwitterにも投稿した画像です。 イラレで作成しました。 今年の干支は寅ということで 寅イメージの黄色ベースで作ってみました。 水引き梅結び(トラっぽいバージョン) 水引き部分の作成で参考にさせていただいたサイトはこちらです! 動画もあり、たいへん分かりやすくて助かりました!! 他にもしめ縄等お正月にぴったりの素材の作り方もあった... --- ### クリスマスカード作成してみました! - Published: 2021-12-22 - Modified: 2021-12-22 - URL: https://na2-factory.com/org-banner-6/ - カテゴリー: Design, works - タグ: オリジナルデザイン こんにちは! 最近PC環境を新しくしまして、 ツール関連の操作に慣れるためにいろいろ練習してます(^ ^) Adobeツールにも早く慣れないと・・・と思って、 クリスマスカードを何種類か制作してみました! 今回のカードのイラスト素材は、いつもお世話になっているクリエイティブマーケットから フリーでダウンロードしたものを使いました! https://creativemarket. com/ 子供むけの可愛いイラストや、 大人っぽいフォントまで色々揃っていてとても重宝してます! カード作成していたと... --- ### 相棒PC(Win10:Dell)が動かなくなった日。原因は熱暴走だった? - Published: 2021-11-07 - Modified: 2024-10-03 - URL: https://na2-factory.com/pc-tips-dell/ - カテゴリー: Other - タグ: Tips, Windows ご無沙汰しております。 ブログ、やっと書く時間が取れました・・・!!! 最近は楽天ECサイトの立ち上げに注力していて 売上も段々伸びてきて、それはいいんですが・・・ 私の担当はWebデザインじゃなくて、Googleスプレッドシートで スクリプト書いてデータ自動生成とかが中心でして・・・(^^; Web屋さんになりたい私にとって、JavaScriptに慣れるのはいいんですけど 何だかこのまま ただのデータ作り屋さんになっちゃいそうで 色々悩んだりもしてます? (めっちゃ忙しいし) そんな中、PCが... --- ### クラウドワークス&Adobeのセミナーに登壇してしまった!の話。 - Published: 2021-08-07 - Modified: 2022-03-04 - URL: https://na2-factory.com/wk-cw-2/ - カテゴリー: Design - タグ: adobeCC こんにちは! 先月の末(21/7/31)に行われた、 CrowdWorks x Adobe共同セミナー 「いつやるの? 今でしょ! デザイン初心者から始められる、初めての副業 その2 -仕事を受注するためのコツ、心構え-」 https://blog. adobe. com/jp/publish/2021/07/29/cc-design-fukugyou-event02. html#gs. 7t4thg に、ワーカーの一人として登壇しちゃいましたΣ(・ω・ノ)ノ! セミナー登壇への経緯 これからA... --- ### HTML/CSS ほんの一手間で劇的に変わる Chapter5 カスタマイズ完成! - Published: 2021-07-26 - Modified: 2022-03-04 - URL: https://na2-factory.com/html-study-5/ - カテゴリー: HTML/CSS - タグ: コーディング こんにちは! コーディング勉強第5弾になります(^^)/ デザインカンプ作成後、他の作業に時間を多く使っていたのでやっとこさの完成になりました? 今回はManaさん本のChapter5のカスタマイズです。 本ではイベントサイトのランディングページだったところを、 架空の結婚式場のブライダルフェアのランディングページとしてカスタマイズしました!! カスタマイズしたサイトをすぐに見る! 今回作成したサイトは以下のバナーをクリックで! ブラウザの戻るボタンでこのブログに帰って来てくださいね!! 1ペー... --- ### HTML/CSS 文字を90度回転、親要素の両端に配置!レスポンシブ対応 - Published: 2021-06-15 - Modified: 2023-09-14 - URL: https://na2-factory.com/html-tips-1/ - カテゴリー: HTML/CSS - タグ: Tips, コーディング こんにちは! カスタマイズサイトのコーディングで苦労したポイントを今後の為に残しておこうと思います。 今回は、本屋サイト NA2 BOOKSTOREのトップページの"ABOUT"と"WORK"の文字の配置についてです。↓ 1 Codepenで再現! 文字を90度回転させて表示している他のサイトを見てカッコいいな~(*'ω'*)やってみたいな~と軽い気持ちでデザインに取り入れたものの、さあコーディング!の段階で止まってしまいました? 検索したり他サイト様のコードを検証ツールで調べたりして一応表示で... --- ### インスタに正方形サイズの動画投稿する手順!AdobePremierePro使用 - Published: 2021-06-11 - Modified: 2021-07-05 - URL: https://na2-factory.com/pr-insta-tips-1/ - カテゴリー: Other - タグ: adobeCC, Tips 2021/6/25 追記 ※Instagram仕様変更があったようで、 この記事で行う手順は 今は不要な部分があります! DropboxからiPhoneへ、の手順は不要になりました(^^)/ こんにちは! 今回は、Instagram(以降 インスタ)に動画を投稿する手順のまとめになります。 インスタの投稿一覧が正方形なので、動画も正方形で揃えて投稿したいと思います! 私が作成したい動画は、 Manaさん本「ほんの一手間で劇的に変わるHTML & CSSとWebデザイン実践講座」 のカスタマイズサ... --- ### HTML/CSS コーポレートサイトの求人ページをカスタマイズ! - Published: 2021-06-07 - Modified: 2021-07-28 - URL: https://na2-factory.com/html-study-4/ - カテゴリー: HTML/CSS - タグ: コーディング こんにちは! コーディング勉強第4弾になります(^^)/ デザインカンプの作成から時間がかかってしまい 更新が遅くなってしまいました? 今回は企業の採用サイトのカスタマイズに挑戦です! カスタマイズしたサイトをすぐに見る! 今回作成したサイトは以下のバナーをクリックで! ブラウザの戻るボタンでこのブログに帰って来てくださいね!! 3ページ構成になっています。構成の詳細は以降の記事に書いてます(^^)/ 変な表示になっていたらすみません? できれば以降の記事も読んでいってくださいませ~( ;∀;)... --- ### HTML/CSS ブログサイトのカスタマイズに挑戦! - Published: 2021-05-12 - Modified: 2021-07-28 - URL: https://na2-factory.com/html-study-3/ - カテゴリー: HTML/CSS - タグ: コーディング こんにちは! 先日の第2弾のカスタマイズサイト、 気が付いたら沢山の方に見て頂いた様で お恥ずかしい限りですが、ありがとうございました さて、コーディングの勉強第3弾! 今回はブログサイトのカスタマイズに挑戦しました! カスタマイズしたサイトをすぐに見る! 今回作成したサイトは以下のバナーをクリックで! ブラウザの戻るボタンでこのブログに帰って来てくださいね!! また、ナビゲーションメニューの「HOME」を押すと このブログのトップページに帰ってきます。 一番最初の記事「やっぱり定番のミネストロ... --- ### HTML/CSS スクロールスナップに挑戦!レスポンシブ対応で苦戦! - Published: 2021-05-02 - Modified: 2021-07-28 - URL: https://na2-factory.com/html-study-2/ - カテゴリー: HTML/CSS - タグ: コーディング コーディングの勉強第2弾! 前回の予告通り、実践編に取り組んでいます(^^)/ 今回はスクロールスナップ!の実践練習です。 カスタマイズしたサイトをすぐに見る! 今回作成したサイトは以下のバナーをクリックで! ブラウザの戻るボタンでこのブログに帰って来てくださいね!! 画面が変になるかも... 未熟者で申し訳ございません!! できれば以降の記事も読んでいってくださいませ~( ;∀;) 使用している本 「ほんの一手間で劇的に変わる HTML & CSSとWebデザイン実践講座」 https://w... --- ### HTML/CSSの勉強スタート! - Published: 2021-04-23 - Modified: 2021-06-19 - URL: https://na2-factory.com/html-study-1/ - カテゴリー: HTML/CSS - タグ: コーディング いよいよコーディングの勉強開始です! 今までのあやふやな知識を整理するところから始めたい! そんな私にピッタリの本を1周しました(^^)/ 超有名なこの本を使いました 「1冊ですべて身につくHTML & CSSとWebデザイン入門講座」 https://www. webcreatorbox. com/webinfo/wcb-book webcreatorboxを運営されているManaさんの本です。 こちらの本で制作できるオシャレなカフェのサイト... 本を見ながらコードを打って、 おおおー!こん... --- ### イラレでもバナートレース30回達成!手順や手ごたえ等をまとめます - Published: 2021-04-21 - Modified: 2024-10-03 - URL: https://na2-factory.com/ai-banner-tr-summary/ - カテゴリー: Design - タグ: illustrator, バナートレース フォトショでバナートレース(以下バナトレと略)30回達成し、さあイラレでもやるぞ!と始めたのが2020年11月9日! 長い時間をかけて、ようやく!!! イラレでも30回バナトレ達成しました!(^^)/ フォトショの時と同様に、イラレでの私なりのバナトレの手順、手ごたえを感じた事、今後の勉強方法など、まとめたいと思います。 長文ですが、どうぞ最後までお付き合い下さい イラレでバナトレ30回の記録 目的はillustrator(イラレ)をさくさく使えるようになること! なので、イラレのみを使ったトレ... --- ### イラレでバナートレース #30『LOFT 文房具の会』LOFTで始まり、LOFTで終わる! - Published: 2021-04-19 - Modified: 2023-08-04 - URL: https://na2-factory.com/ai-banner-tr-30/ - カテゴリー: Design - タグ: illustrator, バナートレース ついに! illustratorでのバナトレ30回目になりました!! イラレに縛ったバナトレはこれで終了します(^^)/ イラレバナトレ1回目も見本はLOFTのバナーでした。 https://na2-factory. com/ai-banner-tr-1/ LOFTで始まり、LOFTで終わる! という事になります(^^ 記念すべき最後の見本は、BANNER LIBRARYで見つけたこちらのバナー! http://design-library. jp/8402 「LOFT 文房具の会」という、 新... --- ### photoshop 雲模様でできることのまとめ! Vol.1 - Published: 2021-04-17 - Modified: 2024-02-22 - URL: https://na2-factory.com/pt-tips-kumo1/ - カテゴリー: Design - タグ: photoshop 2021年4月、記事をリニューアルしました! 今まで薄すぎた内容で、がっかりさせて申し訳ありません 参考にさせて頂いた記事のリンクと、自分が試しに作ってみた作品を紹介しています。 画像が多くて記事が重くなった為、今回をVol. 1として 入らなかった内容を、以降Vol. 2~として続編作りたいと思います。 どうぞこれからもよろしくお願いいたします。 ↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓ photoshopでバナートレースをしている中で、 どうやって実現するのか分からないことを調べてい... --- ### イラレでバナートレース #29『フェリシモ haco』 - Published: 2021-04-17 - Modified: 2023-08-04 - URL: https://na2-factory.com/ai-banner-tr-29/ - カテゴリー: Design - タグ: illustrator, バナートレース illustratorでのバナトレ29回目です! 見本は、Pinterestで見つけたこちらのバナー! https://www. pinterest. jp/pin/646407352767872780/ フェリシモのファッションブランド、hacoのバナーのようです。 ゆるやかなオシャレコーデの女性向けサイトですね。 バナーのほんわかした雰囲気と サイトのイメージが合っているな~と感じました(^^)/ オリジナルとトレース画像 模写です。 もっと短時間でいけると思ったんですがね... 「HAPP... --- ### イラレでバナートレース #28『台湾セール!』 - Published: 2021-04-16 - Modified: 2023-08-04 - URL: https://na2-factory.com/ai-banner-tr-28/ - カテゴリー: Design - タグ: illustrator, バナートレース illustratorでのバナトレ28回目です! 見本は、BANNER LIBRARYで見つけたこちらのバナー! http://design-library. jp/3384 現在はPeachとなっている、バニラエアのバナーです。 3,980円~の値段にビックリです(*_*; オリジナルとトレース画像 結構しんどかった... (+o+) オレンジの枠にミスが残ってます。さあどこでしょう(-. -) 背景、暗い色なので分かりづらかったですが ボンボンの違うパターンが何種類もあったので、 再利用しつ... --- ### イラレでバナートレース #27『Afternoon Tea』宝石のあしらいが可愛い - Published: 2021-04-15 - Modified: 2023-08-04 - URL: https://na2-factory.com/ai-banner-tr-27/ - カテゴリー: Design - タグ: illustrator, バナートレース illustratorでのバナトレ27回目です! 見本は、BANNER LIBRARYで見つけたこちらのバナー! http://design-library. jp/8591 アフタヌーンティーの40周年記念のバナーです。 今まさに展開中のイベントですね! 宝石がキラキラと可愛いデザインです。 でもバナーを初めて見た時はアフタヌーンティーの物だとは思わなかったな? オリジナルとトレース画像 今回は完全模写で! 「40」の数字は長方形や三角形をグラデーション調整しながら えいえい!とはめ込みました... --- ### イラレでバナートレース #26『夜の動物園』 - Published: 2021-04-14 - Modified: 2023-08-04 - URL: https://na2-factory.com/ai-banner-tr-26/ - カテゴリー: Design - タグ: illustrator, バナートレース こんにちは! もう終了してしまったのですが、 DMMブックスの電子書籍初回購入70%OFFというキャンペーンを Twitterで知りまして(*'ω'*) 今後勉強に必要かな?と思った書籍を大人買い!! 内容を消化できたらブログでも紹介したいです! (^^)! 尚、100冊まで70%OFFという凄いキャンペーンでしたが、 さすがに100冊は買ってないです... Twitterはほぼ見る専になっちゃってますけど、 有難い情報を入手できるので助かってます(*'ω'*) さて、illustratorでの... --- ### イラレでバナートレース #25『静岡産業大学オープンキャンパス』 - Published: 2021-04-13 - Modified: 2023-08-04 - URL: https://na2-factory.com/ai-banner-tr-25/ - カテゴリー: Design - タグ: illustrator, バナートレース illustratorでのバナトレ25回目です! 見本は、pinterestで見つけたこちらのチラシです。 https://www. pinterest. jp/pin/646407352767475321/ 静岡産業大学の2015年のオープンキャンパスのチラシですね! 大学のオープンキャンパスのチラシ、 色々なデザインがあって受験とは関係ないけど 見ていて参考になります~! オリジナルとトレース画像 装飾のボリュームがありました(*_*; ガーランド初作成! 細いリボン、紙吹雪。 地味に時間か... --- ### イラレでバナートレース #24『白潤』水滴とか色々難しかった - Published: 2021-04-09 - Modified: 2023-08-04 - URL: https://na2-factory.com/ai-banner-tr-24/ - カテゴリー: Design - タグ: illustrator, バナートレース illustratorでのバナトレ24回目です! 見本は、pinterestで見つけたこちらのバナーです。 https://www. pinterest. jp/pin/646407352764737979/ ロート製薬の「白潤」のバナーです。 ハダラボシリーズは、使い心地いいですよね~(*'ω'*) オリジナルとトレース画像 ※商品は見本から切り抜きです。 今回、難しかったです(+o+) 水の表現は難易度高しです... 水滴と、背景のグラデーション部分で泥沼化してしまいました(-. -) フォ... --- ### イラレでバナートレース #23『メルカリ』ペンツールの練習に! - Published: 2021-04-08 - Modified: 2023-08-04 - URL: https://na2-factory.com/ai-banner-tr-23/ - カテゴリー: Design - タグ: illustrator, バナートレース illustratorでのバナトレ23回目です! 見本は、BANNER LIBRARYで見つけたこちらのバナーです。 http://design-library. jp/6323 メルカリの主催した小学生向けコンクールのバナーですね。 メルカリへの印象はさておき(+o+)バナーのデザインは凄く 参考になるので... トレースしてみました! オリジナルとトレース画像 ひたすらなぞったので本物に近い仕上がりになってます? メルカリのロゴは何となく似たフォントで誤魔化しています。 FacebookやT... --- ### イラレでバナートレース #22『KANAZAWA』 - Published: 2021-04-05 - Modified: 2023-08-04 - URL: https://na2-factory.com/ai-banner-tr-22/ - カテゴリー: Design - タグ: illustrator, バナートレース こんにちは! なんと、以前クラウドワークスのコンペで採用して頂いたお客様から、 直接のご依頼を頂くことが出来ました!!! (^^)! こんな嬉しいことが起こるとは(*'ω'*) 今までのコンペの募集で、何度か 「良いデザインを提案してくださった方には継続してご依頼をする可能性があります... ... 」 という記述を見かけましたが、実際にその後ご依頼があるかというと... ... ないない(+o+)※私以外の方には依頼来てるのかもしれないけど 今回、私に依頼してくださったお客様の募集には そのよ... --- ### イラレでバナートレース #21『淡雪』 - Published: 2021-03-30 - Modified: 2023-08-04 - URL: https://na2-factory.com/ai-banner-tr-21/ - カテゴリー: Design - タグ: illustrator, バナートレース illustratorでのバナトレ21回目です! 見本は、ピンタレストで見つけたこちらのバナーです。 https://www. pinterest. jp/pin/646407352767005678/ 白鶴酒造株式会社のバナーです! スパークリング日本酒なんですね。 これなら普段日本酒を飲まない人も飲みやすそう!? バナーは淡い色合いが大人っぽい素敵なデザインです。 オリジナルとトレース画像 商品は見本から切り抜きです。 商品以外の部分は、今回は見本を下に置かずに模写してます。 その為、ドット... --- ### イラレでバナートレース #20『びゅう桜フォトキャンペーン』 - Published: 2021-03-26 - Modified: 2023-08-04 - URL: https://na2-factory.com/ai-banner-tr-20/ - カテゴリー: Design - タグ: illustrator, バナートレース illustratorでのバナトレ20回目です! 見本は、ピンタレストで見つけたこちらのバナーです。 https://www. pinterest. jp/pin/646407352766975465/ ちょうど桜の時期なので、桜に関するバナーをトレースしたくて選びました(^^ オリジナルとトレース画像 見本の、川にかかる桜の写真。 これならいいかな?と思える写真を探すのに時間がかかりました(+o+) イラレでバナトレなんですけど、 やっぱり写真は加工しないと綺麗に見えない(-_-;) フォトシ... --- ### イラレでバナートレース #19『天空のスケートリンク』 - Published: 2021-03-23 - Modified: 2023-08-04 - URL: https://na2-factory.com/ai-banner-tr-19/ - カテゴリー: Design - タグ: illustrator, バナートレース illustratorでのバナトレ19回目です! 見本は、ピンタレストで見つけたこちらのバナーです。 https://www. pinterest. jp/pin/646407352763121842/ 横浜ワールドポーターズ屋上にある冬季限定スケート場のバナーです。 今回のバナーは2017-2018年シーズンのバナーですね! 2019年~2020年のWEBページが残っていたのですが、 こちらのスケート場は樹脂製リンクだとか(; ・`д・´) お気に入りの洋服が転んでも濡れないというアピールポイ... --- ### イラレでバナートレース #18『ココミスト』 - Published: 2021-03-20 - Modified: 2023-08-04 - URL: https://na2-factory.com/ai-banner-tr-18/ - カテゴリー: Design - タグ: illustrator, バナートレース illustratorでのバナトレ18回目です! 今回の見本は、ピンタレストで見つけたこちらのバナーです。 https://www. pinterest. jp/pin/646407352766519359/ 毛穴クリーニングスプレーのココミストのバナーです。 オリジナルとトレース画像 商品は見本から切り抜きです。 スキンケア商品らしいきれいなグラデーションが気になって、 トレースしてみました! 4つ並ぶ青い円の、艶のある立体的な表現が難しかったです。 背景の画像探しで苦労しまして、結構違う雰囲... --- ### イラレでバナートレース #17『まっしろノワール』 - Published: 2021-03-16 - Modified: 2023-08-04 - URL: https://na2-factory.com/ai-banner-tr-17/ - カテゴリー: Design - タグ: illustrator, バナートレース illustratorでのバナトレ17回目です! トレースをしてから大分日にちが経ってしまって(^^; 思い出しながら書きます? 見本は、BANNER LIBRARYで見つけたこちらのバナーです。 http://design-library. jp/5887 コメダ珈琲のバナーです。 蜂蜜と練乳のとろ~りとした感じが気になるバナーです! オリジナルとトレース画像 まず、商品は見本から切り抜きです。 テキストは少ないのですが、 「まっしろノワール」のフォントが難しかったです! 手持ちのフォントでア... --- ### オリジナルデザイン #5『ホワイトデーのバナー』 - Published: 2021-03-12 - Modified: 2021-03-12 - URL: https://na2-factory.com/org-banner-5/ - カテゴリー: Design, works - タグ: illustrator, photoshop, オリジナルデザイン こんにちは! オリジナルバナー作成第5弾になります。 もうすぐホワイトデーということで、 架空のショッピングモールのキャンペーンバナーを作成しました。 架空のショッピングモール名:Na2 Mall ななふオリジナルデザイン⑤ 誰に向けて ファミリー層 ホワイトデーのプレゼントを用意しようと思っている人 いつもこのモールを利用している人 架空の依頼元 Na2 Mall (イ●ンモールみたいな場所を想定! (^^)! ) 目的 商品をプレゼントとして購入してもらうこと 媒体 SNS,Web(Twit... --- ### オリジナルデザイン #4『ひな祭りスイーツのバナー』 - Published: 2021-03-03 - Modified: 2021-03-03 - URL: https://na2-factory.com/org-banner-4/ - カテゴリー: Design, works - タグ: illustrator, photoshop, オリジナルデザイン こんにちは! オリジナルバナー作成第4弾になります。 ちょうど本日がひな祭り!(2021年3月3日) なので、架空のケーキショップのバナーを作成しました。 架空のケーキショップ名:Na2factory Sweets 今後もスイーツ系で何か作成した際に登場すると思います(^^; ななふオリジナルデザイン④ 誰に向けて 女の子のお子様がいるママさん、 ケーキ大好きな女性 架空の依頼元 Na2Factory Sweets(ケーキショップ) 目的 ひな祭りバージョンのホールケーキの予約をもらうこと 媒体... --- ### 独学・Webデザイン初心者がクラウドワークスのコンペに挑戦した記録 - Published: 2021-03-01 - Modified: 2021-03-01 - URL: https://na2-factory.com/wk-cw-1/ - カテゴリー: Design こんにちは! 最近はクラウドワークスのコンペに挑戦し続けていました! (その影響でバナトレやブログ更新が滞ってました~? ) 私がフォトショのバナトレを始めたのが2020年の8月半ば。 それからイラレのバナトレに移って、今のところ計47回のバナトレ実施。 気付けば半年ほど時が流れていました! Adobeのツールは勿論、デザインについても全くの初心者だった私が どの程度コンペで通用したのか!? 記録として書いておこうと思います。 長文、字ばっかりですみません。 私と同じような道を歩まれている方、こ... --- ### イラレでバナートレース #16『北海道地チーズ』 - Published: 2021-02-08 - Modified: 2023-08-04 - URL: https://na2-factory.com/ai-banner-tr-16/ - カテゴリー: Design - タグ: illustrator, バナートレース illustratorでのバナトレ16回目です! 見本は、ピンタレストで見つけたこちらのバナーです。 https://www. pinterest. jp/pin/646407352762677660/ 表参道ヒルズのバナーです。 北海道の形がロゴっぽく使われて可愛らしいデザインですね!(^^)/ オリジナルとトレース画像 構成はシンプルなので、 さくさくっと形になりました(^^)/ 北海道のイラスト部分、カトラリーはフリー素材を使用しているので、 チーズっぽい色の表現部分に時間を割きました! ... --- ### 制作実績 #2『お客様サイトのアイキャッチ』 - Published: 2021-02-01 - Modified: 2021-02-01 - URL: https://na2-factory.com/past-work-2/ - カテゴリー: Design, works - タグ: illustrator, photoshop, オリジナルデザイン こんにちは! 最近はクラウドワークスのコンペ中心に活動しております(^^)/ 競争率も高く、なかなか採用にならず、厳しい戦いが続いております! そんな中で採用してもらえた、記念すべき2回目の制作実績についてです! 今回は、お客様に公開OKの許可をいただけましたので、 作品をどーんと掲載です!! (^^)! ※クラウドワークスのコンペでは、SNS等に公開しない事という案件も 良く見かけます。 制作実績② ブログのアイキャッチ 誰に向けて ご依頼主様のタイのツアーサイトを利用している方々 依頼元 タ... --- ### イラレでバナートレース #15『イオンモール東久留米の初売り』5本線ブラシで福の字! - Published: 2021-01-23 - Modified: 2023-08-04 - URL: https://na2-factory.com/ai-banner-tr-15/ - カテゴリー: Design - タグ: illustrator, バナートレース illustratorでのバナトレ15回目です! 前回に引き続き、やってみたいお正月バナーに取り組みます。 見本は、ピンタレストで見つけたこちらのバナーです。 https://www. pinterest. jp/pin/646407352764250273/ イオンモール東久留米の初売りセールのバナーです。 お正月風のあしらいが可愛いですね(^^ オリジナルとトレース画像 最も苦労したのはご想像通り、 「福」の字です( ;∀;) 他は何とかなったんですが。 前回のトレースで、蝶結びを5本線ブラ... --- ### オリジナルデザイン #3『共通テスト直前対策講座のバナー』 - Published: 2021-01-15 - Modified: 2021-01-15 - URL: https://na2-factory.com/org-banner-3/ - カテゴリー: Design, works - タグ: illustrator, photoshop, オリジナルデザイン こんにちは! オリジナルバナー作成第3弾になります。 今回は、大学入試共通テストの時期ということで、 架空の塾の募集している対策講座のバナーを作成してみました。 今年はこのような状況なので、受験生の皆さん本当に大変ですね... 私は応援をするしかできないのですが、 皆さんの思いが届くことを祈っております。 ななふオリジナルデザイン③ 誰に向けて 共通テストを受験する方々へ 架空の依頼元 Na2塾(進学塾) 目的 塾の開催する直前対策講座に申込してもらうこと 媒体 SNS,Web 素材 女性の写真... --- ### イラレでバナートレース #14『お年玉キャンペーン』紅白のしめ縄を作る! - Published: 2021-01-09 - Modified: 2023-08-04 - URL: https://na2-factory.com/ai-banner-tr-14/ - カテゴリー: Design - タグ: illustrator, バナートレース illustratorでのバナトレ14回目です! 年末年始、自分で年賀状をデザインしたり、 頂いた年賀状を見たりでお正月デザインに多く触れました(^^)/ お正月っぽいイラスト、和風の飾り等 自分でささっと作れたら役に立つかな?と思い、 お正月関連バナーのトレースにチャレンジします! 見本は、ピンタレストで見つけたこちらのバナーです。 https://www. pinterest. jp/pin/646407352764250197/ シンプルに見えるけど... どれも自分で作れるの?(; ・`... --- ### イラレでバナートレース #13『サンシャインシティ・クリスマス抽選会』 - Published: 2021-01-06 - Modified: 2023-08-04 - URL: https://na2-factory.com/ai-banner-tr-13/ - カテゴリー: Design - タグ: illustrator, バナートレース こんにちは! 2021年初投稿になります(^^ 今年もどうぞよろしくお願い致します!!! さてさて、illustratorでのバナトレ13回目です! クリスマス終わってからの投稿になってしまい、、、 かつ年を越してしまった残念なタイミングなんですが(^^; 見本は、ピンタレストで見つけたサンシャインシティのバナーです。 https://www. pinterest. jp/pin/646407352763545228/ クリスマス配色と、背景のキラキラに惹かれてやってみることにしました! オリジ... --- ### 制作実績 #1『成人式・振袖展示会 A4チラシ』 - Published: 2020-12-22 - Modified: 2020-12-22 - URL: https://na2-factory.com/past-work-1/ - カテゴリー: Design, works - タグ: illustrator, photoshop, オリジナルデザイン こんにちは! 先日納品を終えた、初の制作実績について書きたいと思います。 コンペで採用して頂きました(^^)/ お客様のご意向により、フル解像度で作品を掲載することはNGとなりました。 モデルさんのお顔やお客様情報の詳細が分からない程度に加工するならば、 ブログ等に掲載しても良いとの許可を頂きました(^^)/ なので、ぼんやりとした物になってしまいますが、ご了承くださいませ! 制作実績① 振袖展示会 A4チラシ 誰に向けて 来年、再来年に成人式を迎える方とそのお母様 依頼元 地方の老舗写真館様 ... --- ### イラレでバナートレース #12『ヤマハの英語』 - Published: 2020-12-17 - Modified: 2023-08-04 - URL: https://na2-factory.com/ai-banner-tr-12/ - カテゴリー: Design - タグ: illustrator, バナートレース こんにちは! Twitterに思わず投稿してしまったのですが、 初めてクラウドソーシングのデザインコンペで採用を頂きました!! まだ納品の作業中なので、今後内容を紹介できるかどうか分かりませんが、 本当に嬉しかったです(*´ω`) Twitterでコメント下さった方、いいねを押してくれた皆様 ありがとうございました!!! さてさて、投稿が遅れておりました(+o+) illustratorでのバナトレ12回目です! 見本は、ピンタレストで見つけたヤマハのバナーです。 https://www. pi... --- ### イラレでバナートレース #11『くいしんぼうのバターまつり』写真の切り抜き - Published: 2020-12-10 - Modified: 2023-08-04 - URL: https://na2-factory.com/ai-banner-tr-11/ - カテゴリー: Design - タグ: illustrator, バナートレース こんにちは! 間が空いてしまいました? illustratorでのバナトレ11回目です! イラレで写真の切り抜きをやってみようと思います。 見本は、久しぶりにBannerLIBRARYさんより http://design-library. jp/826 シンプルなバターの写真が存在感ありますね! トレース トレース イラレで写真の切り抜き初! 見本から切り抜きさせて貰いましたが、 粗い箇所が分かっちゃいますね? パスで切り抜きはフォトショと一緒だけど、微修正が中々厳しいようで(^^; そして背景... --- ### オリジナルデザイン #2『スノードームを作ろう!』 - Published: 2020-12-08 - Modified: 2020-12-08 - URL: https://na2-factory.com/org-banner-2/ - カテゴリー: Design, works - タグ: illustrator, photoshop, オリジナルデザイン こんにちは! バナートレース活動に加えて、 自作デザインも継続して取り組みたいと思います! 自分で考えて作ることをしていかないと、上達しないですよね!! 今回はA4のチラシを作ることにしました。 子供が学校から貰ってくるイベントのチラシをイメージしています(^^)/ ななふオリジナルデザイン② スノードームを作ろう!A4チラシ 誰に向けて 小学生と保護者(申込は保護者がする前提) 架空の依頼元 〇〇市の子供科学館。 目的 科学館への来園者を増やしたい。 キッズワークショップの認知度を高めたい。 ... --- ### イラレでバナートレース #10『LOHACO歳末SALE』雪の結晶を作る! - Published: 2020-12-02 - Modified: 2023-08-04 - URL: https://na2-factory.com/ai-banner-tr-10/ - カテゴリー: Design - タグ: illustrator, バナートレース こんにちは! illustratorでのバナトレ10回目です! 冬の可愛いバナーを探してみました! https://www. pinterest. jp/pin/646407352762882849/ LOHACOの2017年の歳末セールのバナーだったようです。 トレース トレース イラレでは雪の結晶を作ったことが無かったのでチャレンジ! しかし... なんか、イマイチ!(+o+) 特にとげとげタイプの結晶が、トレースの方が幅太く可愛くない~? 作り方は梅や桜と同じで、一本枝を作って同じ角度でコ... --- ### イラレでバナートレース #9『スマホアクセ専門店UniCASE』紙吹雪チャレンジ! - Published: 2020-11-28 - Modified: 2023-08-04 - URL: https://na2-factory.com/ai-banner-tr-9/ - カテゴリー: Design - タグ: illustrator, バナートレース 寒くなってきましたね!! illustratorでのバナトレ9回目です! 今回もピンタレストで、可愛い!と思ったバナーをトレースしてます(^^ https://www. pinterest. jp/pin/646407352762457192/ なんば戎橋・河原町オーパにある スマートフォンアクセサリー専門店UNiCASEの1周年記念(2017年当時)のバナーとのことです。 トレース トレース イラレで紙吹雪を作ってみたいと思ってまして、トレースしたいバナーがいくつかあります! 今回のバナーの紙... --- ### イラレでバナートレース #8『阪急百貨店福袋』格子と梅と桜のイラスト - Published: 2020-11-25 - Modified: 2023-08-04 - URL: https://na2-factory.com/ai-banner-tr-8/ - カテゴリー: Design - タグ: illustrator, バナートレース こんにちは!illustratorでのバナトレ8回目です! 今回もピンタレストより、 お正月シーズンの福袋バナーをトレースしてます。 https://www. pinterest. jp/pin/646407352762840143/ 阪急百貨店の2018年の福袋のバナーです。 トレース トレース ぱっと見は良い感じです! (^^)! 赤の格子パターン作成で手戻りが多かったです。 梅の花は簡単にできて良かったです。 桜の花も難しくはなかったけど、見本とちょっと形が違うのが目立つ? もっと花びらが... --- ### イラレでバナートレース #7『東京ミッドタウン』もこもこ円の可愛い背景 - Published: 2020-11-24 - Modified: 2023-08-04 - URL: https://na2-factory.com/ai-banner-tr-7/ - カテゴリー: Design - タグ: illustrator, バナートレース こんにちは!illustratorでのバナトレ7回目です! 今回はピンタレストで探したもこもこ円が可愛いバナーをトレースします(#^^#) https://www. pinterest. jp/pin/646407352762457352/ 東京ミッドタウンの12周年記念バナーです。 トレース トレース もこもこ円は上手くできたかな? しかし今回の一番の強敵は中央のショッピングバッグでした( ;∀;) 「ANNIVERSARY HAPPY BAG」の部分はリボンを作って テキストをリボンに沿わせ... --- ### オリジナルバナー制作 #1『クリスマスセール』 - Published: 2020-11-20 - Modified: 2020-12-08 - URL: https://na2-factory.com/org-banner-1/ - カテゴリー: Design, works - タグ: illustrator, photoshop, オリジナルデザイン こんにちは! そろそろ自作のバナーを作ってみたいと思い、 「クリスマスセール」をテーマに作ってみました! ブログでは出来が悪いと思ってもどんどんアップしちゃいます(^^; 今まで人様のデザインをトレースさせて頂いているだけだったので、 自作となるとやっぱり手が止まりました? 可愛いクリスマスの写真を見つけたので、勢いで作成しました! ななふ自作バナー① クリスマスセール 誰に向けて ファミリー層に... 特にスマホをよく見るママさんに向けて。 架空の依頼元 何のお店なのかを決めていないのですが、... --- ### イラレでバナートレース #6『BEAMS送料無料』パスファインダーを使って作る! - Published: 2020-11-19 - Modified: 2023-08-04 - URL: https://na2-factory.com/ai-banner-tr-6/ - カテゴリー: Design - タグ: illustrator, バナートレース こんにちは!illustratorでのバナトレ6回目です! 今回の見本は、特にパスファインダーの練習になりそうかな? と思って選びました。 http://design-library. jp/4001 BEAMSの送料無料のバナーです。 トレース トレース 何となく同じ感じにはなったかな... ('_') 「¥0」の「0」が大きいような気がしますね。 日本地図の白の格子の線がちょっと太かったかな? そういえば、イラレはフォトショに比べてフォント探しが楽に感じます。 フォントの一覧で入力したテキス... --- ### イラレでバナートレース #5『rednails』斜めストライプなど - Published: 2020-11-18 - Modified: 2023-08-04 - URL: https://na2-factory.com/ai-banner-tr-5/ - カテゴリー: Design - タグ: illustrator, バナートレース こんにちは!illustratorでのバナトレ5回目です! そろそろもう少し凝ったデザインにチャレンジしたいと思いまして、 今回はPinterestで見つけたバナーを見本に選びました! https://www. pinterest. jp/pin/646407352762457206/ ネイル通販 rednails web channel というサイトのキャンペーンバナーだったようです! (現在は上記Pinterestのアドレスからは「キャンペーンは終了しました」という表示になっています) トレ... --- ### イラレでバナートレース #4『FREAK'S CLUB』ブレンド機能を使ってみる! - Published: 2020-11-13 - Modified: 2023-08-04 - URL: https://na2-factory.com/ai-banner-tr-4/ - カテゴリー: Design - タグ: illustrator, バナートレース illustratorでのバナトレ4回目です! 今回もキャンペーンバナーです。 シンプルな構成の中に勉強になる要素が沢山あります! お手本は、BANNER LIBRARYさんで見つけたコチラ! http://design-library. jp/130   FREAK'S CLUBというショップのバナーです。   メンズもレディスもキッズも有りのファッションストアの様です!     トレース トレース 「10」の加工でちょっと苦戦! ブレンドツールで作りましたが、単純にブレンドした物を配置しただ... --- ### イラレでバナートレース #3『USAGI-ONLINE』 - Published: 2020-11-12 - Modified: 2023-08-04 - URL: https://na2-factory.com/ai-banner-tr-3/ - カテゴリー: Design - タグ: illustrator, バナートレース illustratorでのバナトレ3回目です! 今回もシンプル路線継続です(^^ お手本は、BANNER LIBRARYさんで見つけたコチラ! http://design-library. jp/4819   USAGI-ONLINEというショップのバナーです。   ピンク中心の配色と明朝体っぽいフォントで、 女性向けバナーなんだろうなー?と想像します。   トレース トレース 「11」の欠けている部分はマスク(不透明マスク)を使いました。 「%」の線が伸びている部分は、アウトライン化して伸ばし... --- ### イラレでバナートレース #2『SHIPS』シンプルな図形の練習! - Published: 2020-11-11 - Modified: 2023-08-04 - URL: https://na2-factory.com/ai-banner-tr-2/ - カテゴリー: Design - タグ: illustrator, バナートレース illustratorでのバナトレ2回目です! 今回もシンプル路線で、キャンペーンバナーをトレースします(^^)/ お手本は、BANNER LIBRARYさんで見つけたコチラ! http://design-library. jp/6362   SHIPSのバナーです。   シンプルだけど、配色が大人っぽくて落ち着いた感じのきれいめバナーです!     トレース トレース フォントが似て非なる物なので、微妙に違和感が残りましたが・・・ 概ねOKかな?と思います。 長方形と円を描いてみたのが前回から... --- ### イラレでバナートレース #1『LOFT』超シンプルなバナーでスタート! - Published: 2020-11-09 - Modified: 2023-08-04 - URL: https://na2-factory.com/ai-banner-tr-1/ - カテゴリー: Design - タグ: illustrator, バナートレース illustratorの初心者用テキストを一周したのでバナートレースに取り掛かります(^^ photoshopと操作が異なって、混乱の中にいます(^^; 慣れるまで時間がかかりそうです~? さて、初回はシンプルなテキストのみバナーを見本に選びました。 お手本は、BANNER LIBRARYさんで見つけたコチラ! http://design-library. jp/2558   LOFTのバナーです。   2019年のBLACK FRIDAYの特集ページのタイトル画像だったのかな?   LOFTと... --- ### photoshop初心者がバナートレース30本達成!躓きまくりの過程とこれからのこと - Published: 2020-11-06 - Modified: 2024-10-03 - URL: https://na2-factory.com/pt-banner-tr-summary/ - カテゴリー: Design - タグ: photoshop, バナートレース photoshopでのバナートレースを始めてから約2か月半、 先日やっと30本トレース出来たので、 ここで一旦これまでの出来事や成長できた事、今後の課題についてまとめておこうと思います! 私なりのトレース手順も書いておりますが、やり方は皆さん夫々、 もっといい方法を案内してくださる記事も沢山ありますので参考程度に(^^; トレースしたバナー InstagramにUPした物ですが、こんな感じで30本トレースしました! 私(ななふ)のバナートレース開始前の状態 photoshopのスキルゼロ 10年... --- ### photoshop バナートレース #30『ハーゲンダッツ』最後はデザートで! - Published: 2020-11-03 - Modified: 2023-08-04 - URL: https://na2-factory.com/pt-banner-tr-30/ - カテゴリー: Design - タグ: photoshop, バナートレース ついに!photoshopでのバナトレ30回目を迎えました!! photoshopのみでは今回を最後にしようと思います。 最後という事で!デザートのバナーをトレースします。 今回も模写形式で臨んでいます。 お手本は、BANNER LIBRARYさんで見つけたコチラ! http://design-library. jp/3134   ハーゲンダッツストロベリーのバナーです。   苺が大人可愛いバナーです!(^^)/ トレース トレース ロゴや商品は見本から切り抜きです。 苺の良い素材がなかなか無く... --- ### photoshop バナートレース #29『JAL CARD』夕焼け加工にチャレンジ - Published: 2020-10-31 - Modified: 2023-08-04 - URL: https://na2-factory.com/pt-banner-tr-29/ - カテゴリー: Design - タグ: photoshop, バナートレース photoshopでのバナトレ29回目になります。 今回も模写形式で臨んでいます。 お手本は、BANNER LIBRARYさんで見つけたコチラ! http://design-library. jp/2543   JALカードの旅コンテストのバナーです。   ぱっと見て、夕日の加工やってみたい!と思って選びました(^^;     トレース トレース JALのロゴは切り抜きです。 見本のバナーを見た時、「イラスト、無いね!これならできるね!」と思ったんですが... いざ準備段階でよく見たら細かい所に... --- ### photoshop バナートレース #28『トリンプ クリスマスキャンペーン』 - Published: 2020-10-30 - Modified: 2023-08-04 - URL: https://na2-factory.com/pt-banner-tr-28/ - カテゴリー: Design - タグ: photoshop, バナートレース photoshopでのバナトレ28回目になります。 今回も模写形式で臨んでいます。 お手本は、BANNER LIBRARYさんで見つけたコチラ! http://design-library. jp/7179   トリンプのクリスマスキャンペーンのバナーです。   スキレットプレゼントってあまり聞かないですね!?   レシピカードが添えてあって可愛い!   パンケーキ作っている写真が美味しそうでいいですね~!! トレース トレース 全体的にはまあまあな出来... ('ω') トレースのスキレット部... --- ### photoshop バナートレース #27『Bifestaメイク落とし』見事なコントラスト、光の演出 - Published: 2020-10-27 - Modified: 2023-08-04 - URL: https://na2-factory.com/pt-banner-tr-27/ - カテゴリー: Design - タグ: photoshop, バナートレース photoshopでのバナトレ27回目になります。 今回も模写形式で臨んでいます。 お手本は、BANNER LIBRARYさんで見つけたコチラ! http://design-library. jp/5541   『Bifesta デュアルフェイズポアクリア 新発売』のバナーです。 このバナー凄く綺麗なんですけど、サイズを見てびっくり! 3240×2160です!twitterの公式広告のバナーのようです。   バナートレースにはちょっと大き過ぎです(;^_^A   でも、デザインは是非勉強させて頂... --- ### photoshop バナートレース #26『キャラメルマキアート』自分で背景をデコ! - Published: 2020-10-25 - Modified: 2023-08-04 - URL: https://na2-factory.com/pt-banner-tr-26/ - カテゴリー: Design - タグ: photoshop, バナートレース photoshopでのバナトレ26回目になります。 今回も模写形式で臨んでいます。 お手本は、BANNER LIBRARYさんで見つけたコチラ! http://design-library. jp/2072   スターバックスのキャラメルマキアートのバナーです。 干支デザインの亥や、葉っぱのイラストが可愛いバナーです! トレース トレース あれっ... トレースの背景の色味が違う!またやってしまった! 濃い色のままの葉や亥の色と同じ色で、背景のイラスト達を描いてしまったせいですね... 見本は灰... --- ### photoshop バナートレース #25『MAKE KEEP MIST』メイク加工に挑戦! - Published: 2020-10-24 - Modified: 2023-08-04 - URL: https://na2-factory.com/pt-banner-tr-25/ - カテゴリー: Design - タグ: photoshop, バナートレース photoshopでのバナトレ25回目になります。 今回も模写で頑張ります。 お手本は、BANNER LIBRARYさんで見つけたコチラ! http://design-library. jp/5178   KOSEのバナーです。 ショッキングピンクの女子向け華やかなバナーです! トレース トレース メイクの加工をやってみたい!と思ってチャレンジ。 アイメイク、特にラメの加工、やり過ぎとよく分からないの間の調整で時間を使ってしまいました。 どちらかというと、よく分からないの方で完成になりました(;... --- ### サイト公開から約3か月。Googleアドセンス申請に合格!! - Published: 2020-10-23 - Modified: 2020-10-23 - URL: https://na2-factory.com/google_ad_pass/ - カテゴリー: WordPress ちょこちょことphotoshopでのバナートレースの記録を残してきたこのサイト、 Googleアドセンス申請、合格しました! やったー! サイトとして一つの区切りを迎えることができました。 内容が今のところphotoshopの勉強記録で 誰かの為になるような内容がほぼ無い中でしたが、 記事数が30本ぐらいになってきたので先日申請してみたところ、 2日程で合格のメールが届いてびっくりしました! 2020年の6月にローカル環境で準備を始め、レンタルサーバーで公開できたのは7月半ば。 それからバナート... --- ### photoshop バナートレース #24『GARAGE SALE at Shibuya』 - Published: 2020-10-22 - Modified: 2023-08-04 - URL: https://na2-factory.com/pt-banner-tr-24/ - カテゴリー: Design - タグ: photoshop, バナートレース photoshopでのバナトレ24回目になります。 今回から、見本を下におくトレースでなく、見本を見ながら作る模写スタイルにしました。 お手本は、BANNER LIBRARYさんで見つけたコチラ! http://design-library. jp/6882   GARAGE SALE at Shibuyaのバナーです。 かなりシンプルな構成ですが、色の使い方やフォント、テキストの配置が絶妙なバランスでおしゃれ! トレース トレース 制作の振り返り 参考バナータイトル:GARAGE SALE a... --- ### photoshop バナートレース #23『星と乾杯キャンペーン』星空を作りたい! - Published: 2020-10-20 - Modified: 2023-08-04 - URL: https://na2-factory.com/pt-banner-tr-23/ - カテゴリー: Design - タグ: photoshop, バナートレース photoshopでのバナトレ23回目になります。 今回選んだお手本は、BANNER LIBRARYさんで見つけたコチラ! http://design-library. jp/2574   SAPPOROビールのバナーです。 星空がきれいな印象的なデザインです。 トレース トレース トレースの星空、見本に比べるとややのっぺりとしていますね(・。・; もう少しキラキラ感が自然に出せたら良かったなぁ... 星座のイラスト部分は良くできたかなーと! 制作の振り返り 参考バナータイトル:星と乾杯キャンペ... --- ### photoshop バナートレース #22『Re:CENO』インテリアカタログ風に加工 - Published: 2020-10-13 - Modified: 2023-08-04 - URL: https://na2-factory.com/pt-banner-tr-22/ - カテゴリー: Design - タグ: photoshop, バナートレース photoshopでのバナトレ22回目になります。 今回選んだお手本は、BANNER LIBRARYさんで見つけたコチラ! http://design-library. jp/5498   インテリアショップRe:CENOさんのバナーです。 写真がどーんと一枚、シンプルですが、すごくおしゃれに感じるバナーです。 トレース トレース 写真はネットでそれっぽく見える物を探しました。 おしゃれなインテリアっぽい写真、沢山あるんですが、ほどよくナチュナルな雰囲気の物を目標に探し回りました。ちょっと見本の... --- ### photoshop バナートレース #21『広島の幸せスイーツ』 - Published: 2020-10-12 - Modified: 2023-08-04 - URL: https://na2-factory.com/pt-banner-tr-21/ - カテゴリー: Design - タグ: photoshop, バナートレース photoshopでのバナトレ21回目になります。 21回目から、インスタとtwitterにアップしている画像のフォーマットを変えました! 選んだバナーに合わせたカラーを使って、まとまりのあるデザインにしていきたいと思います(^▽^)/ (やっとそういう発想になったんだね... というツッコミがありそう!(;'∀')) さて、今回選んだお手本は、BANNER LIBRARYさんで見つけたコチラ! http://design-library. jp/4726   広島の幸せスイーツのバナーです。 ... --- ### photoshop バナートレース #20『Mystery Deal』ボーダー・ドットのカラフルデザイン - Published: 2020-10-09 - Modified: 2023-08-04 - URL: https://na2-factory.com/pt-banner-tr-20/ - カテゴリー: Design - タグ: photoshop, バナートレース photoshopでのバナトレ20回目になります。 今回選んだお手本は、BANNER LIBRARYさんで見つけたコチラ! http://design-library. jp/1591   ドミノピザのハロウィンキャンペーン?のバナーです。 ハロウィンのイラストやカラフルな色使いでとっても可愛いバナーです。   トレース トレース しまった!トレースののイラストの色が!!紫がない!黒のまま!! やってしまいました(-_-;) 細かいほかの部分の加工に気を取られてついミスったまま、終わりにしてしま... --- ### photoshop バナートレース #19『LINE Pay』テキストをネオン風に - Published: 2020-10-08 - Modified: 2023-08-04 - URL: https://na2-factory.com/pt-banner-tr-19/ - カテゴリー: Design - タグ: photoshop, バナートレース photoshopでのバナトレ19回目になります。 今回選んだお手本は、BANNER LIBRARYさんで見つけたコチラ! http://design-library. jp/5643   LINE Payのバナーです。ネオン風の加工がやってみたくて選びました。 トレース トレース 制作の振り返り 参考バナータイトル:LINE Pay 参考バナーのサイズ (幅 x 高さ)(px): 990 x 876 制作にかかった時間:4時間 使用したフォント 緑のLINE Pay、黄色のシネマウィーク、その... --- ### photoshop バナートレース #18『ドトール・スティックシュー』 - Published: 2020-10-05 - Modified: 2023-08-04 - URL: https://na2-factory.com/pt-banner-tr-18-2/ - カテゴリー: Design - タグ: photoshop, バナートレース photoshopでのバナトレ18回目になります。 今回選んだお手本は、BANNER LIBRARYさんで見つけたコチラ! http://design-library. jp/2082   ドトールのスティックシューのバナーです。 スティックシューが美味しそうです(^▽^)/ トレース トレース 制作の振り返り 参考バナータイトル:ドトール スティックシュー 参考バナーのサイズ (幅 x 高さ)(px): 720 x 721 制作にかかった時間:4. 5時間 使用したフォント ロゴの”ドトールコ... --- ### photoshop バナートレース #17『ファミマカフェ・ソーダバニラ』 - Published: 2020-09-30 - Modified: 2023-08-04 - URL: https://na2-factory.com/pt-banner-tr-17/ - カテゴリー: Design - タグ: photoshop, バナートレース photoshopでのバナトレ17回目になります。 今回選んだお手本は、BANNER LIBRARYさんで見つけたコチラ! http://design-library. jp/566   ファミマカフェのソーダバニラフラッペ。 ファミマカフェについては前にロイヤルミルクティーのバナーもトレースしましたが、 トレースしたくなる素敵なデザインが多いです! https://na2-factory. com/pt-banner-tr-14   私はソーダバニラフラッペは余り飲みたいとは思わないのですが(... --- ### photoshop バナートレース #16『キットカット』やり直しました! - Published: 2020-09-23 - Modified: 2023-08-04 - URL: https://na2-factory.com/pt-banner-tr-16/ - カテゴリー: Design - タグ: photoshop, バナートレース バナトレ16回目になります。 今回選んだお手本は、BANNER LIBRARYさんで見つけたコチラ! http://design-library. jp/3226   配色がかわいいし、ドットの加工やザラザラ感とか、今までやった事のない要素にも惹かれて選びました。 トレース画像(1回目:インスタ発表版) トレース 色が、、、色が全然ちがう!!Σ(゚д゚lll)ガーン 作業している時はこんなに違っているのが分からなかったです... なんでだ!?疲れていたのか!? インスタにも#バナートレースのタ... --- ### photoshop バナートレース #15『瀬戸内のアートを巡る旅』波線を点線にする方法が分かった! - Published: 2020-09-23 - Modified: 2023-08-04 - URL: https://na2-factory.com/pt-banner-tr-15/ - カテゴリー: Design - タグ: photoshop, バナートレース バナトレ15回目に突入です。 今回選んだお手本は、BANNER LIBRARYさんで見つけたコチラ! http://design-library. jp/1725 ”瀬戸内のアートを巡る旅”のバナーです。青くてさわやか! 要素が少なげでトレースしやすそうに見えたバナーです。 トレース トレース トレースの方が黒がはっきり目立ってしまってますね。 背景の画像が曇り空で雲が多いなあ... 見本みたいな空にはできず! 制作の振り返り 参考バナータイトル:瀬戸内のアートを巡る旅 参考バナーのサイズ (幅... --- ### photoshop バナートレース #14『ファミマカフェ・ロイヤルミルクティー』 - Published: 2020-09-18 - Modified: 2023-08-04 - URL: https://na2-factory.com/pt-banner-tr-14/ - カテゴリー: Design - タグ: photoshop, バナートレース こんにちは! ななふです。 【バナートレース14回目】になります! 今回は、BANNER LIBRARYさんで見つけた 『ファミマカフェ・ロイヤルミルクティー』のバナートレースをします! http://design-library. jp/3494 ロイヤルミルクティーなんですが、カフェラテにも見えます(;´∀`) ラテアートができそうな写真ですね(^^ #14 トレース トレース画像 トレース画像のお皿の柄がカジュアルな為、見本の高級感から遠のいてしまいました。 食器の柄って重要ですね。 そし... --- ### photoshop バナートレース #13『カゴメ野菜生活100』水滴、絵の具っぽい加工等難易度高し - Published: 2020-09-16 - Modified: 2023-08-04 - URL: https://na2-factory.com/pt-banner-tr-13/ - カテゴリー: Design - タグ: photoshop, バナートレース こんにちは! ななふです。 【バナートレース13回目】です!! 最近は見た目が華やかなバナーのトレースに挑戦しています。 細かい部分も凝っているので、不明なことを検索しまくりですが、すごく勉強になります。 自分の技術の引き出しをどんどん増やしたいです! 13回目のお手本も私にはでき無さそうな(;´∀`)華やかなバナーです。 BANNER LIBRARYさんで見つけた、『カゴメ野菜生活100』のバナーに挑戦します。 http://design-library. jp/6613 #13 トレース ト... --- ### photoshop バナートレース #12『SAPPORO』夜空と花火を作る! - Published: 2020-09-11 - Modified: 2023-08-04 - URL: https://na2-factory.com/pt-banner-tr-12/ - カテゴリー: Design - タグ: photoshop, バナートレース こんにちは! ななふです。 【バナートレース12回目】です!! 今回は、花火を作ってみたくて、BANNER LIBRARYさんで見つけた 『SAPPOROオンライン飲み会 おうちオクトーバーフェストLIVE』 のバナーをトレースします! http://design-library. jp/6530 #12 トレース トレース画像 #12 制作の振り返り 参考バナータイトル:SAPPOROオンライン飲み会 おうちオクトーバーフェストLIVE参考バナーのサイズ (幅 x 高さ)(px):1024 x... --- ### photoshop バナートレース #11『資生堂』 - Published: 2020-09-08 - Modified: 2023-08-04 - URL: https://na2-factory.com/pt-banner-tr-11/ - カテゴリー: Design - タグ: photoshop, バナートレース こんにちは! ななふです。 【バナートレース11回目】です!! 11回目の見本は、BANNER LIBRARYさんで見つけた資生堂のバナーです。 http://design-library. jp/6210 モデルさんの透明感がすごいですね! #11 トレース トレース画像 #11 制作の振り返り 参考バナータイトル:資生堂 参考バナーのサイズ (幅 x 高さ)(px):800 x 800 制作にかかった時間:4~5時間ぐらい(女性の素材探しで浪費(^^;)) 使用したフォント 肌も心も:漢字は... --- ### photoshop バナートレース #10『ジョージア』ミルククラウンにたどり着く - Published: 2020-09-06 - Modified: 2023-08-04 - URL: https://na2-factory.com/pt-banner-tr-10/ - カテゴリー: Design - タグ: photoshop, バナートレース こんにちは! ななふです。 ついに... ! 【バナートレース10回目】です!! 10回や20回、、、の区切りで、取得できた技や知識を整理できたらいいですよね。 私もできたら、、、作成したいと思います! でも、まだまだ分からない事が多過ぎて もっと数を重ねてからの方が有益な記事になりそうです。(^^;) 10回目は、水表現をもっと練習したくて、分不相応にも ジョージアプレミアムドリップラテ のバナーにチャレンジです。 BANNER LIBRARYさんのサイトで見つけました。 http://des... --- ### photoshop バナートレース #9『LUMINE』水しぶきを再現したい! - Published: 2020-09-02 - Modified: 2023-08-04 - URL: https://na2-factory.com/pt-banner-tr-9/ - カテゴリー: Design - タグ: photoshop, バナートレース こんにちは! ななふです。 【バナートレース9回目】です!! 早いもので、10回が見えて来ました(#^^#) しかしながら、フォトショのテクニックが無さ過ぎる事を実感するばかりです。 切り抜き(特に人物)では猛練習が必要ですし、 イラスト的なバナーには手を出せていないですし... 前回のトレースで水の表現に挑戦したのですが、これがまた全然できなくて。 https://na2-factory. com/pt-banner-tr-8/ 夏らしい水の表現は是非ともできる様になっておきたいです! そんな... --- ### photoshop バナートレース #8 『2020 SUMMER FINAL SALE』 - Published: 2020-08-28 - Modified: 2023-08-04 - URL: https://na2-factory.com/pt-banner-tr-8/ - カテゴリー: Design - タグ: photoshop, バナートレース こんにちは! ななふです。 【バナートレース8回目】です! まだまだ凝ったデザインのバナーを見ると、どうやって作るのか??? 分からないポイントが多すぎて、避けてしまいます(^^;) 少しづつ未知の領域を減らしていきたい! そんなわけで、 今回の見本はBANNER LIBRARYさんのサイトで見つけた、 WORLDオンラインストアの『2020 SUMMER FINAL SALE』のバナーを使用させて頂きます! こちらのバナーは水滴?水面?水しぶきなの?とりあえず水の表現がどうやったら再現できるの... --- ### photoshop バナートレース #7 『フェリシモ』人物の切り抜きに挑戦! - Published: 2020-08-26 - Modified: 2023-08-04 - URL: https://na2-factory.com/pt-banner-tr-7/ - カテゴリー: Design - タグ: photoshop, バナートレース こんにちは! ななふです。 【バナートレース7回目】になります。 今回はいよいよ人物ありのバナーにチャレンジしようと思います。 見本として、Pinterestで見つけたフェリシモさんのバナーを使用させて頂きます! #7 トレース 【トレース】 #7 制作の振り返り 参考バナータイトル:フェリシモ参考バナーのサイズ (幅 x 高さ)(px):564 x 334 制作にかかった時間:2. 5時間 (やっと3時間切った!) 使用したフォント FELISSIMO、FASHION: IPAex明朝 秋新作... --- ---