Webサイト制作– category –
-
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を使って知っておくと超便利「よくある分割バナー」の作成方法の応用を行います。OGPのことも考えたバナーです。まずは出来上がりを確認します。 サイズはアイキャッチ画像になりますので、最初は1200px*630pxで作成します。OGPを意識して中央にタイトルを配置します。出来上がっ... -
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の設定や操作... -
Visual Studio Codeのインストールとセットアップ
Visual Studio Codeは、マイクロソフトが開発した無料のオープンソースのテキストエディターです。多くのプログラミング言語に対応し、Windows、macOS、Linuxで利用できます。 Visual Studio Codeには、シンタックスハイライト、コード補完、デバッグ機能、Git統合、拡張機能など、プログラミング作業に必要な多数の機能が含まれています。ま... -
ホームページ中級講座 Table要素を使って表組作成
Table要素を使って表組み作成 ホームページ内で表組みを作成する際は、HTMLの<table>要素を使用します。かつては「テーブルレイアウト」と呼ばれる手法でWebページ全体のレイアウトに使用されていましたが、現在では表組み（データ表）の作成以外には使われません。また、レスポンシブ対応が必要な現代のWebデザインでは、スマートフォ... -
Part:1 ポートフォリオサイトの作り方-制作工程
ポートフォリオサイトとは、自分をアピールするためのプロフィールや、今まで作成した制作実績や課題などを掲載したWEBサイトのことです。就活やフリーランスで活動する場合は必須のアイテムといえます。 「WEBサイトの作成ができます！」と言っても、相手はあなたが、どういったサイトを作れるのか？デザイン力があるのか？あなたの実力を測... -
02 レスポンシブホームページ基本講座 レスポンシブデザインをもっと効率的に
レスポンシブデザインの課題 レスポンシブデザインは、異なるデバイスに適応する柔軟なウェブデザインを実現します。しかし、実際に構築する際には以下のような課題に直面することがあります ブレイクポイントが多すぎるデバイスごとに細かくブレイクポイントを設定すると、CSSが煩雑になり管理が困難になる。 コードの重複同じスタイルが複... -
01 レスポンシブホームページ基本講座
レレスポンシブホームページ基本講座の第1回目です。前回、レスポンシブデザインに必要な「デベロッパーツール」を解説しました。まだ確認されていない方は、初回講座をご覧ください。 meta viewportビューポートの設定は必須 meta viewport？メタビューポートって何ですか？ パソコンで見ているホームページをスマートフォンで見ると、全体... -
00 レスポンシブホームページ講座 (検証ツール)
レスポンシブホームページ制作講座の概要 今回のレスポンシブホームページ制作講座は、その基本概念と考え方について学ぶ初回講座です。レスポンシブとは何か？ スマートフォン、タブレット、パソコンなど、異なるデバイスの画面サイズに対応できるデザインのことです。 HTMLは一つで統一し、CSSを利用してデザインを可変させるのが特徴です... -
ポートフォリオ・制作実績講座[0]ゼロ Canvaを使って作成してみよう！
ポートフォリオとは？ 分野や業界によって意味が違ってくるのですが、ここで言うポートフォリオとは、【自分をアピールする為の作品集】になります。クリエイティブな業種の採用には、必ずと言っていいほど求められるでしょう。履歴書や職務経歴書よりも重要視される場合がありますので、ポートフォリオを使ってどれだけスキルをアピールでき... -
06 バナー作成講座 バナーをIllustratorで作って書き出し
在宅・フリーランスになるためのバナー作成講座・イラレ編 ６回目のバナー作成講座は、５回目からの引き続き下半分のデザインをIllustratorで作成していきます。上記のようにSALE 詳細はこちらの文字をアピアランスで、境界線を作成し、ブラシツールから、新規にブラシを作成してから花弁を作っていきます。 アピアランスってどういった機能... -
05 バナー作成講座 バナーをIllustratorで作ってみた
在宅・フリーランスになるためのバナー作成講座・イラレ編 5回目のバナー作成講座は、Illustratorを使って、バナーを作成していきます。Photoshopと異なり、写真加工は得意ではないIllustratorですが、オブジェクト（図形）やイラストの作成には適しているツールです。下記のようなイラストメインだったり、図形を多く使うバナーを作成する場... -
04 バナー作成講座 PSDファイルからの書き出し
在宅・フリーランスになるためのバナー作成講座 Webサイト制作で必要な要素のひとつ「バナー」作成講座4回目です。今回は、Photoshopを使ってアートボードごとに作成したバナーを、書き出し形式を使い、１枚１枚をjpeg/png形式で書き出しを行う工程を行っています。 今回は、Photoshopの「アートボード」を使って、異なるデザインを２枚同じ... -
03 バナー作成講座 背景に写真・さくら吹雪のブラシ
在宅・フリーランスになるためのバナー作成講座 Webサイト制作で必要な要素のひとつ「バナー」今回は、Photoshop バナーで、背景に写真やイラストを設置してみます。 バナー作成講座の2回目で、キャッチコピーを入力して配置やデザインもきめたのですが、今から背景ですか？イメージくずれませんか？ そうですね。最初に背景から決めて文字を... -
02 バナー作成講座 コピー文をバナーらしく載せる
在宅・フリーランスになるためのバナー作成講座 Webサイト制作で必要な要素のひとつ「バナー」今回は、Photoshop にコピー文を広告バナーらしく入力していきます！ バナーらしくとは？？どんな入力の仕方があるんですか？ Photoshop にコピー文を広告バナーらしく入力していきます。少ない情報だからこそ選抜されたキャッチコピーにはこだわ... -
01 バナー作成講座 まずは基本のサイズとフォント設定
バナー作成するための準備 バナーを作成するアプリは、特にこれでないとダメ！と決まりがあるわけではありません。使いやすい、慣れたプログラムでもかまいません 但し、Webデザインの仕事としてバナー作成を依頼される場合は別です。一般的なクラウドソーシングでも、PSDファイル(Photoshop形式)で納品やAIファイル(Illustrator形式)で納品... -
コードが爆速で入力できる。 Emmet!プラグインの使い方
模写コーディングを行う際は、少しでも速く、効率良く入力を練習する必要があります。 何度か紹介してきたプラグイン「Emmet!」を再度解説した動画です。確認してみましょう。 EmmetでHTMLのタグを入力してみようっっw Emment でHTMLのタグ（要素）を入力する場合は、要素名を入力してTabキーを押します。 div のあと TABキー で開始と終了タ... -
ホームページ中級講座 HTML編 フォトギャラリーを作る
今回は、Webデザインでよく使われるフォトギャラリーを作成します。写真とキャプションの組み合わせをカード形式で表示するデザインを、HTMLとCSSを使って実現していきます。 どんなフォトギャラリーを作るんですか？ 今回は、写真とキャプションの組み合わせを使ったフォトギャリーを作っていきます！HTMLの<figure>という要素を活用... -
09 ホームページ中級講座 footerを下部に固定
ページ一番下に常に配置するfooter要素の設定 前回の「08 ホームページ中級講座」のfloatを使った回り込みに続き、今回はページの一番下に常にfooter要素を固定する方法を学びます。下記を参照ください 現代のWebサイトの特徴と課題 近年、スマートフォンサイトの普及により、縦に長いLP（ランディングページ）のデザインが主流となっていま... -
08 ホームページ中級講座 floatを使った周り込み
CSSの周り込みプロパティ「float」を使った例 前回「07 ホームページ中級講座」の続きとなります。 ここで使用するHTMLファイルとCSSファイルは下記のページを参照ください。 前回「07 ホームページ中級講座」に引き続き、今回はCSSのプロパティ「float」を使用した例を学習します。floatは、画像やテキストの周り込みを制御するためのプロパ... -
07ホームページ中級講座 CSSで作成するロゴとグラデーションを使ったナビゲーション
HTMLコード <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>ネットワークサービス 株式会社</title> <link rel="stylesheet" href="style.css"> </head> <body> <div class="content"> <header> <h1>NewWorkService</h1> <nav> <ul> <li><a href="#">Home<... -
06 ホームページ中級講座 便利なEmmet!
Emmetとは？ Emmetは、HTMLやCSSのコーディングを効率化するためのツールです。コードのテンプレートを簡単に生成できる「ショートカット機能」があり、ほとんどのモダンなエディタ（VS Code、Sublime Text、Atomなど）に対応しています。Emmetを使うことで、数秒で複雑なHTML構造を楽に生成できます。 !から始める基本操作 まず、HTMLの基本...
