Webデザイン– category –

FukuokaMiyako が運営する学習サイト WebTraining.jp にて、このたび新しく Figma 基礎講座 を公開しました。 WebTraining はこれまで、HTML / CSS / JavaScript / PHP を中心とした「コードに強いオンライン学習サイト」として運営してきました。訓練や企業研修の教材としても利用されており、実践的なコーディングスキルを身につけたい方に...

Figmaを使って、実際のバナー制作と同じ流れで進めていきましょう。今回は、よくある ECサイトのセール告知バナー を題材に、次のステップで解説します。 依頼文から必要な情報を整理する バナーの文言を最適化する（短く・伝わりやすく） ガイド（グリッド）を引く 文字のレイアウト・書体選び 配色・コントラストの調整 情報の優先度に合わ...

はじめに｜APIって難しそう…？大丈夫、JavaScriptで、すぐに使えます 今回は、JavaScriptで、よく聞くAPIを使ってみましょう。 「APIってなんだか専門的な人が使うものでは？」「サーバーとかバックエンドの世界の話じゃないの？」 …と思ってしまいがちですが、実はそんなことはありません。HTML と JavaScript だけでも API を使ってデータ...

JavaScriptでスライドショーを作る方法を学んだ前回（入門編）では、配列で画像を管理し、一定時間ごとに切り替える基本的な動きを実装しました。 今回の「応用編」では、その仕組みをさらに発展させ、実際のWebサイトで使えるレベルのスライドショーを、段階的に作り上げていきます。ただの画像切り替えではなく、以下のような機能を「ゼロ...

ロゴデザインは、企業やブランドのアイデンティティを視覚的に表現する重要な要素です。Webデザインの仕事でも依頼される場面があります。ロゴデザインは、クライアント自信を表す形なので、ともすれば情報が多くなり、ロゴの中にたくさん要素が入り、反対にわかりにくいものになりがちです。ロゴは、一瞬でわかる印象が必要なので、シンプル...

デザインのクオリティを左右する要素の一つにフォント選びがあります。フォントは単なる文字のスタイルではなく、メッセージのトーンや印象を伝える重要なツールです。しかし、数多くのフォントからどれを選べば良いのか迷ってしまうことも少なくありません。 Webデザイナーが実際に使っている定番フォントを欧文フォントと日本語フォントに...

デザインの現場やチームでの会話で、ふと「それって何のことだろう？」と思う瞬間、ありませんか？Webデザイナーやウェブ担当者が日常的に使う専門用語の中には、初心者には馴染みが薄いものや、聞き慣れない言葉がたくさんあります。でも、「これってどういう意味ですか？」と気軽に聞けない雰囲気だったり、今さら聞くのが恥ずかしいと感じ...

Photoshopを使うとき、範囲選択ツールの多さに迷ったことはありませんか？矩形選択ツールやなげなわツール、AIを活用した被写体選択ツールなど、その種類は豊富で、それぞれに得意分野があります。 しかし、この多様性こそが、他のツールやサービスにはないPhotoshopの大きな魅力でもあります！ 目的や作業内容に応じて最適なツールを選ぶこ...

Photoshopのレイヤースタイルは、デザイン作業を効率化しながら、プロフェッショナルな見た目を作るための強力な機能です。文字や図形、画像などのレイヤーに、影をつけたり、光沢を追加したりといったエフェクトを簡単に適用できます。この機能をマスターすれば、バナー作成やロゴデザイン、ウェブ用グラフィック制作の幅が一気に広がります...

Figmaのプロトタイピングとは？ Figmaのプロトタイピング機能を使うと、作成したデザインにーザーが画面上で行う操作＝インタラクティブ設定（タップ、クリック、ホバー、ドラッグなど）に応じて、デザインがどのように反応するかを再現することが可能です。これにより、実際のアプリやウェブサイトの操作感をシミュレーションできます。また...

Figmaのコンポーネントは、Figmaで使われる再利用可能なデザイン要素です。デザインにおいて、同じパーツを繰り返し使用する場合に便利で、一括更新や統一感のあるデザインを実現するための機能です。 コンポーネントの特徴は、元となる「親コンポーネント」があり、これがデザインの基となるオリジナル要素になります。親を修正すると、その...

初心者さんでも大丈夫！ レイアウトグリッド、長方形ツール、テキストツール、プラグイン、オートレイアウトを使って、スマホで見やすいネットショップの骨組み＝ワイヤーフレームを作ってみましょう。使う機能は、 レイアウトグリッド: ページ全体のバランスを整える 長方形ツール: ボタンや画像などの領域を作る テキストツール: 文字を入...

Figmaは、Webデザインやアプリデザイン、プロトタイプ制作に特化したクラウドベースのデザインツールです。ここでは、Figmaの特徴、他のデザインツールとの違い、基本操作について詳しく解説します。これからFigmaを始める方に向けた内容です！ Figmaとは何ができるツールなのか？ Figmaの特徴と得意なこと Figmaは、クラウドベースのデザイ...

楽天市場やさまざまなシーンでよくみかける、写真（アイテム）の背景が取り除かれて、文字を中心にあちこちに配置されているタイプのバナーの作成をPhotoshopで行います。 まずは出来上がりから確認 横幅1280px、高さ720px（アスペクト比16:9) 解像度72ppiのアイキャッチにも使えるバナーサイズです。Photoshopの「埋め込みを配置」「オブジ...

中央に正方形を意識した分割バナーの作成　 今回は、Photoshopを使って知っておくと超便利「よくある分割バナー」の作成方法の応用を行います。OGPのことも考えたバナーです。まずは出来上がりを確認します。 サイズはアイキャッチ画像になりますので、最初は1200px*630pxで作成します。OGPを意識して中央にタイトルを配置します。出来上がっ...

IllustratorとPhotoshopどちらで作りますか？ バナーを作成する際、Webデザイナーがよく直面する疑問のひとつに、「AdobeのPhotoshopとIllustrator、どちらを使うべきか？」というものがあります。クライアントからの納品時の形式依頼が、psdだったら、Photoshop。aiだったら、illustrator と決まりますが、そういった形式の決め事がない場合...

ウェブデザインにおけるフォントの重要性 まずは、視認性（読みやすさ）が第一に挙げられます。Webサイトを閲覧したユーザーが内容をストレスなく、スムーズ理解できるようにするためにはとても重要です。読みやすいフォントを使用することで、UX（ユーザーエクスペリエンス）が向上し、伝達が効果的になります。さらに、ブランドの特定の雰...

ピンタレストなどでよく見かける「よくある分割バナー」をPhotoshopで作成する方法を動画で解説します。シンプルな手順で作れるので、初心者の方にもおすすめです！ まずは出来上がりから確認 今回作成するバナーのサイズは、横幅1000px、高さ500px、解像度72ppiです。デザインのポイントとなる分割部分は、長方形ツールを使って幅500px、高...

Illustratorツールバー 01 回転ツール 02リフレクトツール 03 拡大縮小ツール 上記のツールを繰り返し使うことで、曼荼羅模様を作成してきました。今回は効果＞パスの変形 を使って作成してみましょう。 完成形の確認 ブラシツールと変形ツールを使って作成します。

Illustratorのペンツールは、誰もが苦手意識を持ちやすい機能の一つです。特に曲線を描くときに登場する「方向線」に戸惑い、「どちらを見ればいいのかわからない」と感じた経験はありませんか？今回は、practiceファイルを使いながら、直線と曲線の描き方を練習し、ペンツールのコツをつかむ方法をお伝えします！ ペンツールを使って直線を...

Webデザインのお仕事をする中で、魅力的な写真素材は欠かせません。しかし、どの写真素材サイトを選べば良いのか迷うことも多いはずです。そこで、今回は現役Webデザイナーが実際に活用しているおすすめの写真素材サイトをご紹介します！ Adobe Stock (無料あり） Adobe Stockは、Adobeが提供する高品質な写真やイラスト、動画などの素材をダ...

glyphsは1250種類以上の無料で使えるSVGアイコンをダウンロードできるサイトです。素材が全てSVGなのでサイズやカラーも簡単に変更してダウンロード可能です。ポートフォリオサイト作成や、一般サイト、ECサイトなどに適した、Webデザイン作成においてとても便利なSVGアイコンを無料で利用できるGlyphs。 カテゴリが、Core(860)、Brands(162)...

Illustratorの基本講座となります。iPhone のホーム画面にある見慣れたホームアイコンを作成する講座です。ここでは、基本図形の書き方やそれを使っての新しいオブジェクトの生成を行います。 オブジェクト（図形）である四角や丸を書いてみよう！ 新規のアートボードを作成したら、iPhoneから作りやすそうなアイコンをチョイスしてホーム画...

Illustratorでパーツを回転させながら、模様を完成させる Illustratorで、まずは、上記左側を作成するために、まずはオブジェクトツールより楕円をクリックして100px＊100pxの正円を作成します。それを右側にoption(WindowsはAlt)キーをクリックしてからコピーをします。円を重ねるように配置して、パスファインダーの交差をクリックします。...

リース模様を作る オブジェクトを作成後、パスファインダーの交差 オブジェクトツールより楕円をクリックして100px＊100pxの正円を作成します。 option(WindowsはAlt)キーを押したまま、ドラッグして右にコピーをし、円を重ねるように配置します。 プロパティパネルの「パスファインダー」の「交差」をクリックします。 プロパティパネルが出...

イラストレーターで曼陀羅模様を作ろう！ Illustratorで、回転ツールを使って曼陀羅模様を作る工程です。ここでは、オブジェクトを書くことと、そのオブジェクトを変形させ、基準点を変更した回転ツールを使って、オブジェクトを繰り返しながら曼陀羅になっていくことを行います。 まずは800*800のアートボードを作ってから、縦横の中央に印...

レスポンシブデザインの課題 レスポンシブデザインは、異なるデバイスに適応する柔軟なウェブデザインを実現します。しかし、実際に構築する際には以下のような課題に直面することがあります ブレイクポイントが多すぎるデバイスごとに細かくブレイクポイントを設定すると、CSSが煩雑になり管理が困難になる。 コードの重複同じスタイルが複...

10分で簡単バナー作成 Photoshopを使って写真サイズ変更後、切り抜きツールを使い細長いバナーを作成します。作業時間はおよそ10分です。 今回の動画では、 Photoshop2019までに入っていたプリセット。2020以降は、「従来のプリセット」といって格納された便利グッズを使います。 Photoshop2020からシェイプ・パターン・グラデーション・スウ...

5分でできる簡単バナー作成 Photoshop を使って簡単なバナー作成を行います。使うツールは、 範囲選択のクィック選択ツールとレイヤーマスク レイヤースタイルのグラデーションオーバーレイ ブラシツール（キラキラブラシ） 写真素材が必要なので、下記から素材をダウンロードしておいてください。 Photoshop_banner_01ダウンロード Photosho...

在宅・フリーランスになるためのバナー作成講座・イラレ編 ６回目のバナー作成講座は、５回目からの引き続き下半分のデザインをIllustratorで作成していきます。上記のようにSALE 詳細はこちらの文字をアピアランスで、境界線を作成し、ブラシツールから、新規にブラシを作成してから花弁を作っていきます。 アピアランスってどういった機能...

在宅・フリーランスになるためのバナー作成講座・イラレ編 5回目のバナー作成講座は、Illustratorを使って、バナーを作成していきます。Photoshopと異なり、写真加工は得意ではないIllustratorですが、オブジェクト（図形）やイラストの作成には適しているツールです。下記のようなイラストメインだったり、図形を多く使うバナーを作成する場...

在宅・フリーランスになるためのバナー作成講座 Webサイト制作で必要な要素のひとつ「バナー」作成講座4回目です。今回は、Photoshopを使ってアートボードごとに作成したバナーを、書き出し形式を使い、１枚１枚をjpeg/png形式で書き出しを行う工程を行っています。 今回は、Photoshopの「アートボード」を使って、異なるデザインを２枚同じ...

在宅・フリーランスになるためのバナー作成講座 Webサイト制作で必要な要素のひとつ「バナー」今回は、Photoshop バナーで、背景に写真やイラストを設置してみます。 バナー作成講座の2回目で、キャッチコピーを入力して配置やデザインもきめたのですが、今から背景ですか？イメージくずれませんか？ そうですね。最初に背景から決めて文字を...

在宅・フリーランスになるためのバナー作成講座 Webサイト制作で必要な要素のひとつ「バナー」今回は、Photoshop にコピー文を広告バナーらしく入力していきます！ バナーらしくとは？？どんな入力の仕方があるんですか？ Photoshop にコピー文を広告バナーらしく入力していきます。少ない情報だからこそ選抜されたキャッチコピーにはこだわ...

バナー作成するための準備 バナーを作成するアプリは、特にこれでないとダメ！と決まりがあるわけではありません。使いやすい、慣れたプログラムでもかまいません 但し、Webデザインの仕事としてバナー作成を依頼される場合は別です。一般的なクラウドソーシングでも、PSDファイル(Photoshop形式)で納品やAIファイル(Illustrator形式)で納品...

ピンタレストなどでよく見かける「よくある分割バナー」をPhotoshopで作成する方法を動画で解説します。シンプルな手順で作れるので、初心者の方にもおすすめです！ まずは出来上がりから確認 今回作成するバナーのサイズは、横幅1000px、高さ500px、解像度72ppiです。デザインのポイントとなる分割部分は、長方形ツールを使って幅500px、高...

Illustratorのペンツールは、誰もが苦手意識を持ちやすい機能の一つです。特に曲線を描くときに登場する「方向線」に戸惑い、「どちらを見ればいいのかわからない」と感じた経験はありませんか？今回は、practiceファイルを使いながら、直線と曲線の描き方を練習し、ペンツールのコツをつかむ方法をお伝えします！ ペンツールを使って直線を...

IllustratorとPhotoshopどちらで作りますか？ バナーを作成する際、Webデザイナーがよく直面する疑問のひとつに、「AdobeのPhotoshopとIllustrator、どちらを使うべきか？」というものがあります。クライアントからの納品時の形式依頼が、psdだったら、Photoshop。aiだったら、illustrator と決まりますが、そういった形式の決め事がない場合...

ウェブデザインにおけるフォントの重要性 まずは、視認性（読みやすさ）が第一に挙げられます。Webサイトを閲覧したユーザーが内容をストレスなく、スムーズ理解できるようにするためにはとても重要です。読みやすいフォントを使用することで、UX（ユーザーエクスペリエンス）が向上し、伝達が効果的になります。さらに、ブランドの特定の雰...

在宅・フリーランスになるためのバナー作成講座・イラレ編 5回目のバナー作成講座は、Illustratorを使って、バナーを作成していきます。Photoshopと異なり、写真加工は得意ではないIllustratorですが、オブジェクト（図形）やイラストの作成には適しているツールです。下記のようなイラストメインだったり、図形を多く使うバナーを作成する場...

初心者さんでも大丈夫！ レイアウトグリッド、長方形ツール、テキストツール、プラグイン、オートレイアウトを使って、スマホで見やすいネットショップの骨組み＝ワイヤーフレームを作ってみましょう。使う機能は、 レイアウトグリッド: ページ全体のバランスを整える 長方形ツール: ボタンや画像などの領域を作る テキストツール: 文字を入...

バナー作成するための準備 バナーを作成するアプリは、特にこれでないとダメ！と決まりがあるわけではありません。使いやすい、慣れたプログラムでもかまいません 但し、Webデザインの仕事としてバナー作成を依頼される場合は別です。一般的なクラウドソーシングでも、PSDファイル(Photoshop形式)で納品やAIファイル(Illustrator形式)で納品...

中央に正方形を意識した分割バナーの作成　 今回は、Photoshopを使って知っておくと超便利「よくある分割バナー」の作成方法の応用を行います。OGPのことも考えたバナーです。まずは出来上がりを確認します。 サイズはアイキャッチ画像になりますので、最初は1200px*630pxで作成します。OGPを意識して中央にタイトルを配置します。出来上がっ...

イラストレーターで曼陀羅模様を作ろう！ Illustratorで、回転ツールを使って曼陀羅模様を作る工程です。ここでは、オブジェクトを書くことと、そのオブジェクトを変形させ、基準点を変更した回転ツールを使って、オブジェクトを繰り返しながら曼陀羅になっていくことを行います。 まずは800*800のアートボードを作ってから、縦横の中央に印...

在宅・フリーランスになるためのバナー作成講座・イラレ編 ６回目のバナー作成講座は、５回目からの引き続き下半分のデザインをIllustratorで作成していきます。上記のようにSALE 詳細はこちらの文字をアピアランスで、境界線を作成し、ブラシツールから、新規にブラシを作成してから花弁を作っていきます。 アピアランスってどういった機能...

在宅・フリーランスになるためのバナー作成講座 Webサイト制作で必要な要素のひとつ「バナー」作成講座4回目です。今回は、Photoshopを使ってアートボードごとに作成したバナーを、書き出し形式を使い、１枚１枚をjpeg/png形式で書き出しを行う工程を行っています。 今回は、Photoshopの「アートボード」を使って、異なるデザインを２枚同じ...

デザインのクオリティを左右する要素の一つにフォント選びがあります。フォントは単なる文字のスタイルではなく、メッセージのトーンや印象を伝える重要なツールです。しかし、数多くのフォントからどれを選べば良いのか迷ってしまうことも少なくありません。 Webデザイナーが実際に使っている定番フォントを欧文フォントと日本語フォントに...

Illustratorの基本講座となります。iPhone のホーム画面にある見慣れたホームアイコンを作成する講座です。ここでは、基本図形の書き方やそれを使っての新しいオブジェクトの生成を行います。 オブジェクト（図形）である四角や丸を書いてみよう！ 新規のアートボードを作成したら、iPhoneから作りやすそうなアイコンをチョイスしてホーム画...

Figmaのプロトタイピングとは？ Figmaのプロトタイピング機能を使うと、作成したデザインにーザーが画面上で行う操作＝インタラクティブ設定（タップ、クリック、ホバー、ドラッグなど）に応じて、デザインがどのように反応するかを再現することが可能です。これにより、実際のアプリやウェブサイトの操作感をシミュレーションできます。また...

Figmaは、Webデザインやアプリデザイン、プロトタイプ制作に特化したクラウドベースのデザインツールです。ここでは、Figmaの特徴、他のデザインツールとの違い、基本操作について詳しく解説します。これからFigmaを始める方に向けた内容です！ Figmaとは何ができるツールなのか？ Figmaの特徴と得意なこと Figmaは、クラウドベースのデザイ...

Webデザインのお仕事をする中で、魅力的な写真素材は欠かせません。しかし、どの写真素材サイトを選べば良いのか迷うことも多いはずです。そこで、今回は現役Webデザイナーが実際に活用しているおすすめの写真素材サイトをご紹介します！ Adobe Stock (無料あり） Adobe Stockは、Adobeが提供する高品質な写真やイラスト、動画などの素材をダ...

glyphsは1250種類以上の無料で使えるSVGアイコンをダウンロードできるサイトです。素材が全てSVGなのでサイズやカラーも簡単に変更してダウンロード可能です。ポートフォリオサイト作成や、一般サイト、ECサイトなどに適した、Webデザイン作成においてとても便利なSVGアイコンを無料で利用できるGlyphs。 カテゴリが、Core(860)、Brands(162)...

デザインの現場やチームでの会話で、ふと「それって何のことだろう？」と思う瞬間、ありませんか？Webデザイナーやウェブ担当者が日常的に使う専門用語の中には、初心者には馴染みが薄いものや、聞き慣れない言葉がたくさんあります。でも、「これってどういう意味ですか？」と気軽に聞けない雰囲気だったり、今さら聞くのが恥ずかしいと感じ...

在宅・フリーランスになるためのバナー作成講座 Webサイト制作で必要な要素のひとつ「バナー」今回は、Photoshop にコピー文を広告バナーらしく入力していきます！ バナーらしくとは？？どんな入力の仕方があるんですか？ Photoshop にコピー文を広告バナーらしく入力していきます。少ない情報だからこそ選抜されたキャッチコピーにはこだわ...

在宅・フリーランスになるためのバナー作成講座 Webサイト制作で必要な要素のひとつ「バナー」今回は、Photoshop バナーで、背景に写真やイラストを設置してみます。 バナー作成講座の2回目で、キャッチコピーを入力して配置やデザインもきめたのですが、今から背景ですか？イメージくずれませんか？ そうですね。最初に背景から決めて文字を...

10分で簡単バナー作成 Photoshopを使って写真サイズ変更後、切り抜きツールを使い細長いバナーを作成します。作業時間はおよそ10分です。 今回の動画では、 Photoshop2019までに入っていたプリセット。2020以降は、「従来のプリセット」といって格納された便利グッズを使います。 Photoshop2020からシェイプ・パターン・グラデーション・スウ...

Figmaのコンポーネントは、Figmaで使われる再利用可能なデザイン要素です。デザインにおいて、同じパーツを繰り返し使用する場合に便利で、一括更新や統一感のあるデザインを実現するための機能です。 コンポーネントの特徴は、元となる「親コンポーネント」があり、これがデザインの基となるオリジナル要素になります。親を修正すると、その...

Illustratorツールバー 01 回転ツール 02リフレクトツール 03 拡大縮小ツール 上記のツールを繰り返し使うことで、曼荼羅模様を作成してきました。今回は効果＞パスの変形 を使って作成してみましょう。 完成形の確認 ブラシツールと変形ツールを使って作成します。

JavaScriptでスライドショーを作る方法を学んだ前回（入門編）では、配列で画像を管理し、一定時間ごとに切り替える基本的な動きを実装しました。 今回の「応用編」では、その仕組みをさらに発展させ、実際のWebサイトで使えるレベルのスライドショーを、段階的に作り上げていきます。ただの画像切り替えではなく、以下のような機能を「ゼロ...

楽天市場やさまざまなシーンでよくみかける、写真（アイテム）の背景が取り除かれて、文字を中心にあちこちに配置されているタイプのバナーの作成をPhotoshopで行います。 まずは出来上がりから確認 横幅1280px、高さ720px（アスペクト比16:9) 解像度72ppiのアイキャッチにも使えるバナーサイズです。Photoshopの「埋め込みを配置」「オブジ...

リース模様を作る オブジェクトを作成後、パスファインダーの交差 オブジェクトツールより楕円をクリックして100px＊100pxの正円を作成します。 option(WindowsはAlt)キーを押したまま、ドラッグして右にコピーをし、円を重ねるように配置します。 プロパティパネルの「パスファインダー」の「交差」をクリックします。 プロパティパネルが出...

Illustratorでパーツを回転させながら、模様を完成させる Illustratorで、まずは、上記左側を作成するために、まずはオブジェクトツールより楕円をクリックして100px＊100pxの正円を作成します。それを右側にoption(WindowsはAlt)キーをクリックしてからコピーをします。円を重ねるように配置して、パスファインダーの交差をクリックします。...

Figmaを使って、実際のバナー制作と同じ流れで進めていきましょう。今回は、よくある ECサイトのセール告知バナー を題材に、次のステップで解説します。 依頼文から必要な情報を整理する バナーの文言を最適化する（短く・伝わりやすく） ガイド（グリッド）を引く 文字のレイアウト・書体選び 配色・コントラストの調整 情報の優先度に合わ...

ロゴデザインは、企業やブランドのアイデンティティを視覚的に表現する重要な要素です。Webデザインの仕事でも依頼される場面があります。ロゴデザインは、クライアント自信を表す形なので、ともすれば情報が多くなり、ロゴの中にたくさん要素が入り、反対にわかりにくいものになりがちです。ロゴは、一瞬でわかる印象が必要なので、シンプル...

Photoshopのレイヤースタイルは、デザイン作業を効率化しながら、プロフェッショナルな見た目を作るための強力な機能です。文字や図形、画像などのレイヤーに、影をつけたり、光沢を追加したりといったエフェクトを簡単に適用できます。この機能をマスターすれば、バナー作成やロゴデザイン、ウェブ用グラフィック制作の幅が一気に広がります...

5分でできる簡単バナー作成 Photoshop を使って簡単なバナー作成を行います。使うツールは、 範囲選択のクィック選択ツールとレイヤーマスク レイヤースタイルのグラデーションオーバーレイ ブラシツール（キラキラブラシ） 写真素材が必要なので、下記から素材をダウンロードしておいてください。 Photoshop_banner_01ダウンロード Photosho...

Photoshopを使うとき、範囲選択ツールの多さに迷ったことはありませんか？矩形選択ツールやなげなわツール、AIを活用した被写体選択ツールなど、その種類は豊富で、それぞれに得意分野があります。 しかし、この多様性こそが、他のツールやサービスにはないPhotoshopの大きな魅力でもあります！ 目的や作業内容に応じて最適なツールを選ぶこ...

レスポンシブデザインの課題 レスポンシブデザインは、異なるデバイスに適応する柔軟なウェブデザインを実現します。しかし、実際に構築する際には以下のような課題に直面することがあります ブレイクポイントが多すぎるデバイスごとに細かくブレイクポイントを設定すると、CSSが煩雑になり管理が困難になる。 コードの重複同じスタイルが複...

はじめに｜APIって難しそう…？大丈夫、JavaScriptで、すぐに使えます 今回は、JavaScriptで、よく聞くAPIを使ってみましょう。 「APIってなんだか専門的な人が使うものでは？」「サーバーとかバックエンドの世界の話じゃないの？」 …と思ってしまいがちですが、実はそんなことはありません。HTML と JavaScript だけでも API を使ってデータ...

FukuokaMiyako が運営する学習サイト WebTraining.jp にて、このたび新しく Figma 基礎講座 を公開しました。 WebTraining はこれまで、HTML / CSS / JavaScript / PHP を中心とした「コードに強いオンライン学習サイト」として運営してきました。訓練や企業研修の教材としても利用されており、実践的なコーディングスキルを身につけたい方に...