HTMLとCSSの基本 【保存版】Webデザイナー未経験でも失敗しない！定番jQueryプラグイン「Slick」「Lity」の導入手順と完全実装コード
「ポートフォリオを作っているけれど、なんだか動きがなくて素人っぽい」 「JavaScriptのコードを見ても、どこをどう触れば動くのかさっぱりわからない」Webデザインの勉強を始めたばかりのころ、誰もが一度はこの壁にぶつかります。特にコーデ...
Photogentle
HTMLとCSSの基本 
WEB制作基礎知識 【保存版】Webデザイン初心者がプロへ急成長する最短ルート！「守破離」で学ぶ上達の4ステップ
Webデザインの学習を始めたばかりのとき、「センスがないから上手くなれない」「ツールの使い方はわかったけれど、何から作ればいいの？」と悩んでしまうことはありませんか？実は、プロとして活躍しているデザイナーも、最初から自分だけのオリジナル作品...
Affinityの使い方 Affinity 切り抜き練習
概要以下の課題をAffinityでやってみましょう。作業内容画像にあるタコ、カニ、ヒトデを切り抜いて背景透過の画像にしてください。↓データ画像の上で右クリック→画像を保存使用ソフトAffinity答え合わせ（動画）レイヤーを選んでいないとオ...
Affinityの使い方 Affinityの選択範囲とマスクを理解しよう
概要無料公開されたAffinityの使い勝手を検証していきます。マスクが必要な例を紹介人物の画像を丸く切り抜きたい素材（画像上で右クリック→保存）やってみた動画Photoshopとほぼ変わらない操作感でした。楕円形選択は「中心から」がデフォ...
Affinityの使い方 Affinityで画像を明るくする
概要Afiifnityでphotoshopの課題をやってみました。作業内容暗い画像を次の画像を参考に明るくしてください。データ画像の上で右クリック→画像を保存使用ソフトAffinity使用する主な機能 明るさ・コントラスト※最終的に目標の状...
Affinityの使い方 Affinityで画像を配置してみよう
概要2025年10月31日にAffinityが無料になりました。無料のこのツールは実用できるのか？を検証していきたいと思います。まずは上記の課題をやってみたいと思います。レベル１ 画像を配置するPhotoshopでは作業をするときにデータを...
JavaScript練習問題 jQuery入門：60分で「動く」Webサイトを作ろう【slick.js実装】
「jQueryって名前は聞くけど、結局なにができるの？」 「独学で勉強しているけど、実務でどう使うのかイメージが湧かない…」そんな悩みを持つあなたへ。 今のWeb制作の現場では、jQueryを一から十まで書くことはほとんどありません。「CS...
フォトショップの練習問題 Photoshop画像アセット書き出しの使い方｜出力されないときの確認手順
この記事でできることレイヤー名を使って画像をまとめて書き出す手順と、書き出せないときの確認方法を紹介します。バナー1枚だけを書き出す場合は「ファイル ＞ 書き出し ＞ 書き出し形式」も選択肢です。繰り返し素材を更新する場合に画像アセットを使...
フォトショップの練習問題 Photoshop アートボードツールの使い方&隣に見本をおいてみよう
概要文字やレイヤーの操作から学びたい方は、Photoshop学習ロードマップへ戻れます。この記事では、見本と制作中の画面を並べて比べる方法を扱います。Photoshopの応用機能解説です。この記事では「アートボード」機能を紹介します。アート...
Figmaの練習問題 WEBデザイン課題：クリエイターのためのコワーキングスペース「Pass Office」
課題概要Figma向けのWEBデザインの課題です。フリーランスのクリエイター向けコワーキングスペース「Pass Office」のウェブサイトデザインの制作をお願いします！Pass Officeは、利用者同士でインスピレーションを得て、新しい...
プログラムを作ってみよう 画像に簡単に文字入れするツールを作った「クリップボード画像エディタ」
上記サイトから使えます。クリップボード画像エディタの使い方まずは編集したい画像をコピーします。スクリーンショットをとることを想定しています。ページにアクセスしctrl＋vもしくは⌘+vで画像を貼り付けてください。各種ツールで文字入れ、四角形...
フォトショップの練習問題 photoshop合成練習
作業内容2つの素材を合成および、補正をして次の画像を作成してください。素材データ使用ソフトAdobe Photoshop使用する主な機能例 画像配置 オブジェクト選択 調整レイヤー答え合わせ（動画）