HTMLとCSSの基本 【保存版】Webデザイナー未経験でも失敗しない！定番jQueryプラグイン「Slick」「Lity」の導入手順と完全実装コード
「ポートフォリオを作っているけれど、なんだか動きがなくて素人っぽい」 「JavaScriptのコードを見ても、どこをどう触れば動くのかさっぱりわからない」Webデザインの勉強を始めたばかりのころ、誰もが一度はこの壁にぶつかります。特にコーデ...
HTMLとCSSの基本 
WEB制作基礎知識 【保存版】Webデザイン初心者がプロへ急成長する最短ルート！「守破離」で学ぶ上達の4ステップ
Webデザインの学習を始めたばかりのとき、「センスがないから上手くなれない」「ツールの使い方はわかったけれど、何から作ればいいの？」と悩んでしまうことはありませんか？実は、プロとして活躍しているデザイナーも、最初から自分だけのオリジナル作品...
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 画像アセット書き出し
概要Photoshopの応用機能解説です。この記事では「画像アセット」機能を紹介します。こちらの機能は通常のPhotoshop機能と異なる点が多いです。まずどんな機能か把握しましょう。Photoshop 画像アセットの基本Photoshop...
フォトショップの練習問題 Photoshop アートボードツールの使い方&隣に見本をおいてみよう
概要Photoshopの応用機能解説です。この記事では「アートボード」機能を紹介します。アートボードの基本まず、アートボードを有効にするには新規作成の際にチェックを入れておく必要があります。こうすることでアートボードが有効になります。レイヤ...
Figmaの練習問題 WEBデザイン課題：クリエイターのためのコワーキングスペース「Pass Office」
課題概要Figma向けのWEBデザインの課題です。フリーランスのクリエイター向けコワーキングスペース「Pass Office」のウェブサイトデザインの制作をお願いします！Pass Officeは、利用者同士でインスピレーションを得て、新しい...
プログラムを作ってみよう 画像に簡単に文字入れするツールを作った「クリップボード画像エディタ」
上記サイトから使えます。クリップボード画像エディタの使い方まずは編集したい画像をコピーします。スクリーンショットをとることを想定しています。ページにアクセスしctrl＋vもしくは⌘+vで画像を貼り付けてください。各種ツールで文字入れ、四角形...
フォトショップの練習問題 photoshop合成練習
作業内容2つの素材を合成および、補正をして次の画像を作成してください。素材データ使用ソフトAdobe Photoshop使用する主な機能例 画像配置 オブジェクト選択 調整レイヤー答え合わせ（動画）