-
WordPress で「簡単にお引越し」が可能なプラグイン All-in-One WP Migration
Wordpressはお引越しが結構大変 WordPressサイトをサーバーからサーバーへのお引っ越し（移行）や、ローカルで作成したWordPressをサーバーへ移行は、一見シンプルに、ファイルだけ移動すればいいのかな？と思えるかもしれませんが、いくつかの理由で大変になることがあります。 サイト構造が複雑 WordPressサイトは、データベースとファイル... -
Figma基礎 Figmaをインタラクティブに！プロトタイプ設定
Figmaのプロトタイピングとは？ Figmaのプロトタイピング機能を使うと、作成したデザインにーザーが画面上で行う操作＝インタラクティブ設定（タップ、クリック、ホバー、ドラッグなど）に応じて、デザインがどのように反応するかを再現することが可能です。これにより、実際のアプリやウェブサイトの操作感をシミュレーションできます。また... -
Figma基礎 コンポーネントとインスタンス
Figmaのコンポーネントは、Figmaで使われる再利用可能なデザイン要素です。デザインにおいて、同じパーツを繰り返し使用する場合に便利で、一括更新や統一感のあるデザインを実現するための機能です。 コンポーネントの特徴は、元となる「親コンポーネント」があり、これがデザインの基となるオリジナル要素になります。親を修正すると、その... -
Figma基礎 スマートフォン対応のワイヤーフレームの作成
初心者さんでも大丈夫！ レイアウトグリッド、長方形ツール、テキストツール、プラグイン、オートレイアウトを使って、スマホで見やすいネットショップの骨組み＝ワイヤーフレームを作ってみましょう。使う機能は、 レイアウトグリッド: ページ全体のバランスを整える 長方形ツール: ボタンや画像などの領域を作る テキストツール: 文字を入... -
Figmaを知ろう！入門講座 基本操作と概要
Figmaは、Webデザインやアプリデザイン、プロトタイプ制作に特化したクラウドベースのデザインツールです。ここでは、Figmaの特徴、他のデザインツールとの違い、基本操作について詳しく解説します。これからFigmaを始める方に向けた内容です！ Figmaとは何ができるツールなのか？ Figmaの特徴と得意なこと Figmaは、クラウドベースのデザイ... -
今更聞けない。Webサイトのアップロード方法。FTPって何？
「Webサイトをアップロードする」と聞くと、初心者の方は少し難しそうに感じるかもしれません。でも実は、適切なツールと手順を知っていれば簡単にできます。その中でもよく使われる方法が FTP（File Transfer Protocol） を使ったアップロード・ダウンロードです。人気のFTPクライアントソフト「FileZilla」を使った具体的なアップロード手... -
Photoshopのオブジェクト選択を使って、商品を並べたバナーを簡単に作成しよう！
楽天市場やさまざまなシーンでよくみかける、写真（アイテム）の背景が取り除かれて、文字を中心にあちこちに配置されているタイプのバナーの作成をPhotoshopで行います。 まずは出来上がりから確認 横幅1280px、高さ720px（アスペクト比16:9) 解像度72ppiのアイキャッチにも使えるバナーサイズです。Photoshopの「埋め込みを配置」「オブジ... -
HTMLを適当に書いてませんか？マークアップはとても大事です！
HTMLを扱うとき、「とりあえず見た目さえ整えばいい」という思いで書かれているコードに出会うことがあります。しかし、マークアップを適当に書いてしまうと、SEOやアクセシビリティの面で大きな問題が発生することがあります。適当なマークアップがもたらす影響も考えて記述する必要があります。 HTMLのマークアップとは？ HTML（Hypertext ... -
意外と読めない・・・HTML/CSS/JavaScript/PHP/WordPressのコードの読み方
授業で生徒さんから「このHTML要素やCSSプロパティってどう読むんですか？」と質問されることがよくあります。特に、意外と特殊な読み方をするものや、日本語では馴染みのない発音をするものも少なくありません。そのため、授業中に間違った読み方をしてしまい、「先生、それ違うのでは？」と指摘されてしまったことも正直あります（少し恥ず... -
WebデザイナーがおすすめするWordPress 無料＆有料テーマ
Webデザイン会社や多くのユーザーに人気の高いCMS「Wordpress 」そのWordPressにはデザイン性の高い「テーマ」（テンプレート）が数多く用意されており、テーマは管理画面（ダッシュボード）の外観から選択して簡単にセッティングすることができます。 また、外観 ＞ 新規追加 ＞アップロードを行って、ダウンロードしてきた有料のテーマを、... -
Photoshopで6分割レイアウトを作る方法｜写真・アイキャッチ・バナー作成
Photoshopで6分割レイアウトを作ってみよう 写真を1枚だけ配置するのではなく、画面をいくつかのエリアに分割すると、複数の商品や作品、サービスなどを1枚の画像の中で見せることができます。アイキャッチ画像やWebバナー、SNS用画像などにも使いやすいレイアウトです。 今回は、1200×630pxのアイキャッチ画像を6つのエリアに分割し、中央に... -
Webデザイナーだったら、IllustratorとPhotoshopどちらでバナーを作りますか？
IllustratorとPhotoshopどちらで作りますか？ バナーを作成する際、Webデザイナーがよく直面する疑問のひとつに、「AdobeのPhotoshopとIllustrator、どちらを使うべきか？」というものがあります。クライアントからの納品時の形式依頼が、psdだったら、Photoshop。aiだったら、illustrator と決まりますが、そういった形式の決め事がない場合... -
現役ウェブデザイナーおすすめのフォント！20選！オススメのGoogleフォント
ウェブデザインにおけるフォントの重要性 まずは、視認性（読みやすさ）が第一に挙げられます。Webサイトを閲覧したユーザーが内容をストレスなく、スムーズ理解できるようにするためにはとても重要です。読みやすいフォントを使用することで、UX（ユーザーエクスペリエンス）が向上し、伝達が効果的になります。さらに、ブランドの特定の雰... -
Webデザイナーがおすすめする無料SVGアイコン「Tabler Icons」
様々なサイトで、UIデザインにぴったりのSVG及びPNGアイコンが無料で使えるTabler Icons Over 4900 pixel-perfect icons for web design このサイトでは、4944以上の種類のアイコンを利用することができます。これらのアイコンはどれもバランスが取れており、サイズを変更することができるため、大きなサイズにしても線の太さを調... -
WordPress[初心者向け]固定ページとメニュー作成 -3-
3回目のWordPress（ワードプレス）初心者向け講座では、よくある会社のウェブサイトを想定した固定ページの作成と、固定ページを作成したあと、ヘッダー・フッター・モバイルのメニュー反映までを行なっています。 Wordpress基礎講座の１回目・２回目の続きでもありますので、まだの方は、ぜひ下記の動画からご参照ください。 動画をチェック... -
WordPress[初心者向け]基本のプラグインをインストール -2-
今回のWordPress（ワードプレス）初心者向け講座（2回目）では、前回に引き続き、設定したテーマに必要なプラグインを最小限に絞り、その導入と有効化、そしてダッシュボードの確認方法について解説いたします。前回の講座のテーマ設定から、さらに機能を拡張していきます。 ポイントとしては、プラグインの選定には注意が必要だということで... -
WordPress 最小限入れておきたい「おすすめのプラグイン」
WordPressを初めて利用する際、最小限の必要な設定から始めることはウェブサイトの効率的な構築において重要ですが、基本的なワードプレスの機能だけでは、足りない部分があります。そういった時に、いくつかの必須のプラグインを導入することで、使い勝手がよくなります。 ここでは、WordPressの設定をする際におすすめの最小限のプラグイン... -
WordPress[初心者向け] ダッシュボードの設定と使い方 -1-
このセクションでは、WordPressの管理画面、つまりダッシュボードについて詳しく解説し、基本的な設定方法をご紹介しております。ローカル環境で、Wordpressを起動しますので、WordPressローカル環境構築 の準備が必要です。下記のページよりご確認ください。 Localを起動し、ログイン Localを起動した後、WP Adminをクリックし、ワードプレ... -
Visual Studio Codeのおすすめプラグインをインストールしてみる
Visual Studio Code（VSC）は、軽量で高機能なプログラムを記述するための、コードエディタとして広く利用されています。便利な拡張機能（プラグイン）を活用することで、開発効率を向上させ、スピーディで快適な開発環境を構築することができます。VSCのおすすめプラグインをいくつか紹介します。 まずは、拡張機能（プラグイン）のインスト... -
WordPressでLocalを使う。ローカル環境構築ガイド–初心者向け
レンタルサーバーを契約する前に、まずは自分のパソコンでWordPressを使いこなせるように練習したいと考えていませんか？実は、WordPressはレンタルサーバーを利用しなくても、ローカル環境（自分のパソコン上）にインストールして動かすことができます。この方法を利用すれば、実際の公開サイトを作成する前に、自由にWordPressの設定や操作... -
Photoshopを使用。知っておくと超便利「よくある分割バナー」の作成方法
ピンタレストなどでよく見かける「よくある分割バナー」をPhotoshopで作成する方法を動画で解説します。シンプルな手順で作れるので、初心者の方にもおすすめです！ まずは出来上がりから確認 今回作成するバナーのサイズは、横幅1000px、高さ500px、解像度72ppiです。デザインのポイントとなる分割部分は、長方形ツールを使って幅500px、高... -
Webデザイナーがおすすめするレンタルサーバー・比較
Webデザインを行う上で、レンタルサーバーの選択は非常に重要です。使い安く良いレンタルサーバーを選ぶことで、サイトの速度や安定性、セキュリティなど、様々な面でメリットが得られます。 今までクライアントのサーバー設定や自社サイトの利用で使ってきた下記のサーバーの中で、比較しながらおすすめのレンタルサーバーをご紹介します。... -
Visual Studio Codeのインストールとセットアップ
Visual Studio Codeは、マイクロソフトが開発した無料のオープンソースのテキストエディターです。多くのプログラミング言語に対応し、Windows、macOS、Linuxで利用できます。 Visual Studio Codeには、シンタックスハイライト、コード補完、デバッグ機能、Git統合、拡張機能など、プログラミング作業に必要な多数の機能が含まれています。ま... -
04 イラストレーター曼荼羅模様 効果の変形ツール
Illustratorツールバー 01 回転ツール 02リフレクトツール 03 拡大縮小ツール 上記のツールを繰り返し使うことで、曼荼羅模様を作成してきました。今回は効果＞パスの変形 を使って作成してみましょう。 完成形の確認 ブラシツールと変形ツールを使って作成します。 -
Adobe Illustrator 誰もが苦手な「ペンツール」の基本的な操作練習
Illustratorのペンツールは、誰もが苦手意識を持ちやすい機能の一つです。特に曲線を描くときに登場する「方向線」に戸惑い、「どちらを見ればいいのかわからない」と感じた経験はありませんか？今回は、practiceファイルを使いながら、直線と曲線の描き方を練習し、ペンツールのコツをつかむ方法をお伝えします！ ペンツールを使って直線を... -
ホームページ中級講座 Table要素を使って表組作成
Table要素を使って表組み作成 ホームページ内で表組みを作成する際は、HTMLの<table>要素を使用します。かつては「テーブルレイアウト」と呼ばれる手法でWebページ全体のレイアウトに使用されていましたが、現在では表組み（データ表）の作成以外には使われません。また、レスポンシブ対応が必要な現代のWebデザインでは、スマートフォ... -
現役Webデザイナーがここは使える！写真素材サイトを紹介
Webデザインのお仕事をする中で、魅力的な写真素材は欠かせません。しかし、どの写真素材サイトを選べば良いのか迷うことも多いはずです。そこで、今回は現役Webデザイナーが実際に活用しているおすすめの写真素材サイトをご紹介します！ Adobe Stock (無料あり） Adobe Stockは、Adobeが提供する高品質な写真やイラスト、動画などの素材をダ... -
簡単！商用利用無料で利用できるSVGアイコン素材 -Glyphs
glyphsは1250種類以上の無料で使えるSVGアイコンをダウンロードできるサイトです。素材が全てSVGなのでサイズやカラーも簡単に変更してダウンロード可能です。ポートフォリオサイト作成や、一般サイト、ECサイトなどに適した、Webデザイン作成においてとても便利なSVGアイコンを無料で利用できるGlyphs。 カテゴリが、Core(860)、Brands(162)... -
Part:1 ポートフォリオサイトの作り方-制作工程
ポートフォリオサイトとは、自分をアピールするためのプロフィールや、今まで作成した制作実績や課題などを掲載したWEBサイトのことです。就活やフリーランスで活動する場合は必須のアイテムといえます。 「WEBサイトの作成ができます！」と言っても、相手はあなたが、どういったサイトを作れるのか？デザイン力があるのか？あなたの実力を測... -
01 Illustratorアイコン作成講座 iPhoneのホーム画面アイコン
Illustratorの基本講座となります。iPhone のホーム画面にある見慣れたホームアイコンを作成する講座です。ここでは、基本図形の書き方やそれを使っての新しいオブジェクトの生成を行います。 オブジェクト（図形）である四角や丸を書いてみよう！ 新規のアートボードを作成したら、iPhoneから作りやすそうなアイコンをチョイスしてホーム画... -
03 イラストレーター曼荼羅模様 拡大縮小を使って
Illustratorでパーツを回転させながら、模様を完成させる Illustratorで、まずは、上記左側を作成するために、まずはオブジェクトツールより楕円をクリックして100px＊100pxの正円を作成します。それを右側にoption(WindowsはAlt)キーをクリックしてからコピーをします。円を重ねるように配置して、パスファインダーの交差をクリックします。... -
02 イラストレーター曼荼羅模様 リフレクトを使ってリーフ
リース模様を作る オブジェクトを作成後、パスファインダーの交差 オブジェクトツールより楕円をクリックして100px＊100pxの正円を作成します。 option(WindowsはAlt)キーを押したまま、ドラッグして右にコピーをし、円を重ねるように配置します。 プロパティパネルの「パスファインダー」の「交差」をクリックします。 プロパティパネルが出... -
01 イラストレーター曼荼羅模様 まずは基本の回転ツール
イラストレーターで曼陀羅模様を作ろう！ Illustratorで、回転ツールを使って曼陀羅模様を作る工程です。ここでは、オブジェクトを書くことと、そのオブジェクトを変形させ、基準点を変更した回転ツールを使って、オブジェクトを繰り返しながら曼陀羅になっていくことを行います。 まずは800*800のアートボードを作ってから、縦横の中央に印... -
02 レスポンシブホームページ基本講座 レスポンシブデザインをもっと効率的に
レスポンシブデザインの課題 レスポンシブデザインは、異なるデバイスに適応する柔軟なウェブデザインを実現します。しかし、実際に構築する際には以下のような課題に直面することがあります ブレイクポイントが多すぎるデバイスごとに細かくブレイクポイントを設定すると、CSSが煩雑になり管理が困難になる。 コードの重複同じスタイルが複... -
01 レスポンシブホームページ基本講座
レレスポンシブホームページ基本講座の第1回目です。前回、レスポンシブデザインに必要な「デベロッパーツール」を解説しました。まだ確認されていない方は、初回講座をご覧ください。 meta viewportビューポートの設定は必須 meta viewport？メタビューポートって何ですか？ パソコンで見ているホームページをスマートフォンで見ると、全体... -
00 レスポンシブホームページ講座 (検証ツール)
レスポンシブホームページ制作講座の概要 今回のレスポンシブホームページ制作講座は、その基本概念と考え方について学ぶ初回講座です。レスポンシブとは何か？ スマートフォン、タブレット、パソコンなど、異なるデバイスの画面サイズに対応できるデザインのことです。 HTMLは一つで統一し、CSSを利用してデザインを可変させるのが特徴です...
