WEB制作基礎知識 【保存版】Webデザイン初心者がプロへ急成長する最短ルート！「守破離」で学ぶ上達の4ステップ
Webデザインの学習を始めたばかりのとき、「センスがないから上手くなれない」「ツールの使い方はわかったけれど、何から作ればいいの？」と悩んでしまうことはありませんか？実は、プロとして活躍しているデザイナーも、最初から自分だけのオリジナル作品...
WEB制作基礎知識
WEB制作基礎知識 
WEBデザイン企画 インタラクション前提でデザインしよう！
Web制作における「インタラクション」とは、ユーザーとWebサイト（またはアプリ）との間で行われる双方向のやり取りを指します。ユーザーの行動に応じて、画面上の要素が反応したり変化したりする仕組みのことです。「Webサイトは操作することができ...
WEB制作基礎知識 WEBデザインにおけるモニターの重要性と、RGB・解像度の理解
WEBデザインをする上で、モニター（ディスプレイ）の仕組みを理解することは非常に重要です。特に、RGB（色の表現方法）と解像度（画面の精細さ）を正しく理解すると、より適切なデザインが作成できます。RGBとは？（色の表現方法）RGB（Red,...
Canvaの使い方 【ポートフォリオ作成パーフェクトガイド】WEBデザイナー職に転職しよう！※PDFポートフォリオ
WEBデザイナーに興味があるけど、求人要項に「ポートフォリオ提出」って書いてある。聞いたことがない単語だ。ポートフォリオっていうのは「作品集」のことだよ。WEBデザイナーとしてスキルを持っていることを示すために作品集を提出するの。スキルの証...
WEB制作基礎知識 Sass超入門 （さわりだけ）
Web制作でよく使われるSassについて知っておこう！CSSを作成するために言語、Sass(SCSS)があります。がっつり使っての現場も当然ありますのでまずは概要を知っておきましょう！PHP（Hypertext Preprocessor）は...
WEB制作基礎知識 PHP超入門 （さわりだけ）
Web制作でよく使われるPHPについて知っておこう！サーバーサイドのプログラミング言語として「PHP」があります。こちらについて学んで、Web制作についてより深く理解しましょう！PHP（Hypertext Preprocessor）は、サー...
WEB制作基礎知識 GitとGitHub超入門 （さわりだけ）
Web制作でも使うよ、GitとGitHubを知っておこうバージョン管理ツールとして「Git」があります。概念が理解しにくいものなのですが、使えると大変便利なので把握してみましょう！Gitは、プログラミングやWeb制作で使用されるバージョン管...
WEB制作基礎知識 イラストレーターでSVG画像を作ろう！
SVG画像を作ろう！スマホ対応が必須となった現在の状況では綺麗に表示できるSVGを利用することが非常に有用です。今回はイラストレーターによるSVG画像の作成方法についてまとめたいと思います。今回はイラストレーターでこのような画像を作ってみま...
WEB制作基礎知識 Basic認証をかける ※中級者向け
サイトの閲覧に簡易のパスワードをかけようwebサイトにパスワードの閲覧制限をかけたい場合はサーバーの設定ファイルを追加し、パスワードをかけます。macの場合「.htaccess」という名称のファイルは非表示になってしまうため注意が必要です。...
WEB制作基礎知識 スムーススクロールと上に戻るボタンを実装する
スムーススクロールと上に戻るボタンを実装しましょう！スムーススクロールとはページ内リンクを押した際に、すーっと移動するものです。まずはページ内リンクを設定しておきましょう。該当エリアに「ID」を振っておき、そこへaタグでリンクさせます。<a...
WEB制作基礎知識 ハンバーガーメニューから始めるjQuery
スマホサイトにハンバーガーメニューを実装しよう！スマホサイトを作った際にハンバーガーメニューによるメニュー表示の動作は欠かせません。jQueryの使い方をスマホメニューの作り方から学んでいきましょう。次のような動きのメニューを作成できます。...
WEB制作基礎知識 AniCollectionの使い方
作ったサイトにアニメーションを追加したい！サイトを作っているとアニメーションを追加したいことがあるでしょう。アニメーションを1から作るのは大変ですが、ライブラリを使うことで簡単にサイトに動きを追加することができます。今回使うのは以下のサイト...