-
Figma基礎 スマートフォン対応のワイヤーフレームの作成
初心者さんでも大丈夫！ レイアウトグリッド、長方形ツール、テキストツール、プラグイン、オートレイアウトを使って、スマホで見やすいネットショップの骨組み＝ワイヤ... -
Figmaを知ろう！入門講座 基本操作と概要
Figmaは、Webデザインやアプリデザイン、プロトタイプ制作に特化したクラウドベースのデザインツールです。ここでは、Figmaの特徴、他のデザインツールとの違い、基本操... -
今更聞けない。Webサイトのアップロード方法。FTPって何？
「Webサイトをアップロードする」と聞くと、初心者の方は少し難しそうに感じるかもしれません。でも実は、適切なツールと手順を知っていれば簡単にできます。その中でも... -
Photoshopのオブジェクト選択を使って、商品を並べたバナーを簡単に作成しよう！
楽天市場やさまざまなシーンでよくみかける、写真（アイテム）の背景が取り除かれて、文字を中心にあちこちに配置されているタイプのバナーの作成をPhotoshopで行います... -
HTMLを適当に書いてませんか？マークアップはとても大事です！
HTMLを扱うとき、「とりあえず見た目さえ整えばいい」という思いで書かれているコードに出会うことがあります。しかし、マークアップを適当に書いてしまうと、SEOやアク... -
意外と読めない・・・HTML/CSS/JavaScript/PHP/WordPressのコードの読み方
授業で生徒さんから「このHTML要素やCSSプロパティってどう読むんですか？」と質問されることがよくあります。特に、意外と特殊な読み方をするものや、日本語では馴染み... -
WebデザイナーがおすすめするWordPress 無料＆有料テーマ
Webデザイン会社や多くのユーザーに人気の高いCMS「Wordpress 」そのWordPressにはデザイン性の高い「テーマ」（テンプレート）が数多く用意されており、テーマは管理画... -
Photoshopでアイキャッチ画像の作成。中央を意識した6分割バナー -応用-
中央に正方形を意識した分割バナーの作成 今回は、Photoshopを使って知っておくと超便利「よくある分割バナー」の作成方法の応用を行います。OGPのことも考えたバナー... -
Webデザイナーだったら、IllustratorとPhotoshopどちらでバナーを作りますか？
IllustratorとPhotoshopどちらで作りますか？ バナーを作成する際、Webデザイナーがよく直面する疑問のひとつに、「AdobeのPhotoshopとIllustrator、どちらを使うべきか... -
現役ウェブデザイナーおすすめのフォント！20選！オススメのGoogleフォント
ウェブデザインにおけるフォントの重要性 まずは、視認性（読みやすさ）が第一に挙げられます。Webサイトを閲覧したユーザーが内容をストレスなく、スムーズ理解できる... -
Webデザイナーがおすすめする無料SVGアイコン「Tabler Icons」
様々なサイトで、UIデザインにぴったりのSVG及びPNGアイコンが無料で使えるTabler Icons Over 4900 pixel-perfect icons for web design このサイトでは、494... -
WordPress[初心者向け]固定ページとメニュー作成 -3-
3回目のWordPress（ワードプレス）初心者向け講座では、よくある会社のウェブサイトを想定した固定ページの作成と、固定ページを作成したあと、ヘッダー・フッター・モ... -
WordPress[初心者向け]基本のプラグインをインストール -2-
今回のWordPress（ワードプレス）初心者向け講座（2回目）では、前回に引き続き、設定したテーマに必要なプラグインを最小限に絞り、その導入と有効化、そしてダッシュ... -
WordPress 最小限入れておきたい「おすすめのプラグイン」
WordPressを初めて利用する際、最小限の必要な設定から始めることはウェブサイトの効率的な構築において重要ですが、基本的なワードプレスの機能だけでは、足りない部分... -
WordPress[初心者向け] ダッシュボードの設定と使い方 -1-
このセクションでは、WordPressの管理画面、つまりダッシュボードについて詳しく解説し、基本的な設定方法をご紹介しております。ローカル環境で、Wordpressを起動しま... -
Visual Studio Codeのおすすめプラグインをインストールしてみる
Visual Studio Code（VSC）は、軽量で高機能なプログラムを記述するための、コードエディタとして広く利用されています。便利な拡張機能（プラグイン）を活用することで... -
WordPressでLocalを使う。ローカル環境構築ガイド–初心者向け
レンタルサーバーを契約する前に、まずは自分のパソコンでWordPressを使いこなせるように練習したいと考えていませんか？実は、WordPressはレンタルサーバーを利用しな... -
Photoshopを使用。知っておくと超便利「よくある分割バナー」の作成方法
ピンタレストなどでよく見かける「よくある分割バナー」をPhotoshopで作成する方法を動画で解説します。シンプルな手順で作れるので、初心者の方にもおすすめです！ ま... -
Webデザイナーがおすすめするレンタルサーバー・比較
Webデザインを行う上で、レンタルサーバーの選択は非常に重要です。使い安く良いレンタルサーバーを選ぶことで、サイトの速度や安定性、セキュリティなど、様々な面でメ... -
商用利用可！無料でイラストを手に入れよう！必見サイト一挙紹介
商用利用可能なイラストを手に入れることは、クリエイティブなプロジェクトを推進する上での大きな助けになります。しかも、無料で利用できるとなれば、デザイナーやプ... -
Visual Studio Codeのインストールとセットアップ
Visual Studio Codeは、マイクロソフトが開発した無料のオープンソースのテキストエディターです。多くのプログラミング言語に対応し、Windows、macOS、Linuxで利用でき... -
04 イラストレーター曼荼羅模様 効果の変形ツール
Illustratorツールバー 01 回転ツール 02リフレクトツール 03 拡大縮小ツール 上記のツールを繰り返し使うことで、曼荼羅模様を作成してきました。今回は効果＞パスの変... -
Adobe Illustrator 誰もが苦手な「ペンツール」の基本的な操作練習
Illustratorのペンツールは、誰もが苦手意識を持ちやすい機能の一つです。特に曲線を描くときに登場する「方向線」に戸惑い、「どちらを見ればいいのかわからない」と感... -
ホームページ中級講座 Table要素を使って表組作成
Table要素を使って表組み作成 ホームページ内で表組みを作成する際は、HTMLの<table>要素を使用します。かつては「テーブルレイアウト」と呼ばれる手法でWebペー... -
現役Webデザイナーがここは使える！写真素材サイトを紹介
Webデザインのお仕事をする中で、魅力的な写真素材は欠かせません。しかし、どの写真素材サイトを選べば良いのか迷うことも多いはずです。そこで、今回は現役Webデザイ... -
簡単！商用利用無料で利用できるSVGアイコン素材 -Glyphs
glyphsは1250種類以上の無料で使えるSVGアイコンをダウンロードできるサイトです。素材が全てSVGなのでサイズやカラーも簡単に変更してダウンロード可能です。ポートフ... -
Part:1 ポートフォリオサイトの作り方-制作工程
ポートフォリオサイトとは、自分をアピールするためのプロフィールや、今まで作成した制作実績や課題などを掲載したWEBサイトのことです。就活やフリーランスで活動する... -
01 Illustratorアイコン作成講座 iPhoneのホーム画面アイコン
Illustratorの基本講座となります。iPhone のホーム画面にある見慣れたホームアイコンを作成する講座です。ここでは、基本図形の書き方やそれを使っての新しいオブジェ... -
03 イラストレーター曼荼羅模様 拡大縮小を使って
Illustratorでパーツを回転させながら、模様を完成させる Illustratorで、まずは、上記左側を作成するために、まずはオブジェクトツールより楕円をクリックして100px＊1... -
02 イラストレーター曼荼羅模様 リフレクトを使ってリーフ
リース模様を作る オブジェクトを作成後、パスファインダーの交差 オブジェクトツールより楕円をクリックして100px＊100pxの正円を作成します。 option(WindowsはAlt)キ... -
01 イラストレーター曼荼羅模様 まずは基本の回転ツール
イラストレーターで曼陀羅模様を作ろう！ Illustratorで、回転ツールを使って曼陀羅模様を作る工程です。ここでは、オブジェクトを書くことと、そのオブジェクトを変形... -
02 レスポンシブホームページ基本講座 レスポンシブデザインをもっと効率的に
レスポンシブデザインの課題 レスポンシブデザインは、異なるデバイスに適応する柔軟なウェブデザインを実現します。しかし、実際に構築する際には以下のような課題に直... -
01 レスポンシブホームページ基本講座
レレスポンシブホームページ基本講座の第1回目です。前回、レスポンシブデザインに必要な「デベロッパーツール」を解説しました。まだ確認されていない方は、初回講座を... -
00 レスポンシブホームページ講座 (検証ツール)
レスポンシブホームページ制作講座の概要 今回のレスポンシブホームページ制作講座は、その基本概念と考え方について学ぶ初回講座です。レスポンシブとは何か？ スマー... -
Photoshopを使った横長簡単バナー作成２
10分で簡単バナー作成 Photoshopを使って写真サイズ変更後、切り抜きツールを使い細長いバナーを作成します。作業時間はおよそ10分です。 今回の動画では、 Photoshop20... -
Photoshop を使って簡単バナー作成1
5分でできる簡単バナー作成 Photoshop を使って簡単なバナー作成を行います。使うツールは、 範囲選択のクィック選択ツールとレイヤーマスク レイヤースタイルのグラデ...
