# LLMs.txt - Sitemap for AI content discovery # FASTCODING BLOG > HTMLコーディングやJavaScript、WordPress制作に関する情報が満載です --- ## 投稿 ## 投稿 - [【最新】HTMLコーディング代行会社 検索上位10社比較（2025年4月）](https://fastcoding.jp/blog/all/info/hikaku_202504/): こちらの記事では、コーディング代行を利用... - [「Webディレクター必携 ─ 現場経験から導いた“フロント制作 完全ガイド”」　Vol.2　レスポンシブ対応の落とし穴 ─ ブレイクポイントだけじゃ防げないUI崩れ](https://fastcoding.jp/blog/all/info/web-direction-guide02/): UIUXのレスポンシブ対応はPCとスマホ... - [【このデザイン、どうコーディングする？ 】#3｜JSなしでスクロール連動フェードイン。CSSだけでここまでできる！](https://fastcoding.jp/blog/all/frontend/css-scroll-fadein/): 弊社で実際に使っているCSSだけでスクロ... - [「Webディレクター必携 ─ 現場経験から導いた“フロント制作 完全ガイド”」　Vol.1　なぜ“デザイン通り”に見えない？実装現場が語る、再現性の限界と理由](https://fastcoding.jp/blog/all/info/web-direction-guide01/): デザインとコーディングの「ズレ」は、技術... - [【このデザイン、どうコーディングする？ 】#02「Pinterest風の高さバラバラな要素をスマートに整列させる方法」](https://fastcoding.jp/blog/all/ui-ux/pinterest-layout-css/): Pinterest風のグリッドレイアウト... - [【このデザイン、どうコーディングする？ 】#01「スマホで横スライド！比率固定のカルーセルUIをCSSだけで作る方法」](https://fastcoding.jp/blog/all/html-css/carousel-by-css/): このブログシリーズでは、モダンなUIデザ... - [いまさら聞けない！CSSでレイアウトを決めるプロパティと具体的な使い方](https://fastcoding.jp/blog/all/frontend/css-layout-properties/): Web制作をしていると、「このレイアウト... - [これだけは押さえたい！リスクを回避オープンソースライブラリ活用とライセンスの基本](https://fastcoding.jp/blog/all/info/what-licenses-are-better/): WEBサイトやWEBシステムを作るとき、... - [【コーディング屋のネタ帳】データ可視化はこれで決まり！散布図作成に役立つJavaScriptライブラリ5選](https://fastcoding.jp/blog/all/frontend/javascript-scatter-plot-plugins/): データを視覚的に伝えるためのレーダーチャ... - [【コーディング屋のネタ帳】データ可視化はこれで決まり！レーダーチャート作成に役立つJavaScriptライブラリ5選](https://fastcoding.jp/blog/all/frontend/javascript-radar-chart-plugins/): データを視覚的に伝えるためのレーダーチャ... - [【コーディング屋のネタ帳】データ可視化はこれで決まり！折れ線グラフ作成に役立つJavaScriptライブラリ5選](https://fastcoding.jp/blog/all/frontend/javascript-line-graph-plugins/): データをわかりやすく伝える手段として、グ... - [AUN座談会に参加しました！](https://fastcoding.jp/blog/all/info/aun/): 先日、弊社でも大変お世話になっている「A... - [【最新】HTMLコーディング代行会社 検索上位10社比較（2025年1月）](https://fastcoding.jp/blog/all/info/hikaku_202501/): こちらの記事では、コーディング代行を利用... - [【コーディング屋のネタ帳】データ可視化はこれで決まり！円グラフ作成に役立つJavaScriptライブラリ5選](https://fastcoding.jp/blog/all/frontend/javascript-circle-graph-plugins/): 最近、データのビジュアル化が注目されてお... - [＜みんな気になる＞コーディング代行会社のよくある用語とその解説](https://fastcoding.jp/blog/all/info/coding_keywords/): コーディング代行会社を調べていると、各社... - [【完全版】絶対に失敗しない！WordPressの引っ越し《その6～引っ越し後の動作確認編～》](https://fastcoding.jp/blog/all/wordpress/wordpress-moving-step6/): DNSの切り替えが完了したら、新しいサー... - [【完全版】絶対に失敗しない！WordPressの引っ越し《その5～DNSの切り替え編～》](https://fastcoding.jp/blog/all/wordpress/wordpress-moving-step5/): いままでの流れで、既に新しいサーバにはW... - [【完全版】絶対に失敗しない！WordPressの引っ越し《その4～リストア（アップロード）編～》](https://fastcoding.jp/blog/all/wordpress/wordpress-moving-step4/): ファイルデータとデータベースのバックアッ... - [【完全版】絶対に失敗しない！WordPressの引っ越し《その3～バックアップ編～》](https://fastcoding.jp/blog/all/wordpress/wordpress-moving-step3/): サーバの選定が完了したら、次に行うべきス... - [【完全版】絶対に失敗しない！WordPressの引っ越し《その2～サーバ選定編～》](https://fastcoding.jp/blog/all/wordpress/wordpress-moving-step2/): さて、Wordpress引っ越し作業の連... - [【完全版】絶対に失敗しない！WordPressの引っ越し](https://fastcoding.jp/blog/all/wordpress/wordpress-moving-step1/): WordPress関連で、おそらくお客様... - [【コーディング屋のネタ帳】データ可視化はこれで決まり！棒グラフ作成に役立つJavaScriptライブラリ5選](https://fastcoding.jp/blog/all/frontend/javascript-bar-graph-plugins/): 最近、Webサイトでデータをグラフにして... - [【最新】HTMLコーディング代行会社 おすすめ6社比較（2024年11月）](https://fastcoding.jp/blog/all/info/hikaku_202411/): 最新のウェブ検索結果をもとに、HTMLコ... - [【コーディング屋のネタ帳】簡単に実装できるスクロールアニメーション3選](https://fastcoding.jp/blog/all/info/easy-scroll-animations-by-css/): 最近のWEBサイトでは、スクロールに合わ... - [＜大公開＞コーディング代行会社のメリットデメリット、上手な使い方とは](https://fastcoding.jp/blog/all/info/codingmerit/): コーディング代行専業として、かれこれもう... - [【第４章】「コーディング代行サービスに関するよくある質問」についてまとめて回答します！](https://fastcoding.jp/blog/all/info/beginner-series04/): コーディング代行会社がお届けする「初めて... - [【2024年8月調査結果】推奨ブレイクポイントとWebサイト横幅とファーストビュー](https://fastcoding.jp/blog/all/info/designwidth-202408/): こんにちは。FASTCODINGデザイナ... - [【第３章】コーディング代行サービスの選び方](https://fastcoding.jp/blog/all/info/beginner-series03/): コーディング代行会社がお届けする「初めて... - [【第２章】「コーディング代行サービス」を使うのはどんな人？](https://fastcoding.jp/blog/all/info/beginner-series02/): コーディング代行会社がお届けする「初めて... - [【第１章】HTMLコーディング代行サービスとは？](https://fastcoding.jp/blog/all/info/beginner-series01/): ウェブサイト制作に欠かせない「コーディン... - [Wordpressのエディタにはどんな違いがある？　～Gutenbergエディタとクラシックエディタの違い～](https://fastcoding.jp/blog/all/wordpress/wordpress_01/): WordPressのエディタには、「グー... - [【YouTube,mp4】 Webサイトトップに動画を利用する時のメリットと注意点](https://fastcoding.jp/blog/all/webdesign/movie-on-webpage/): こんにちは。FASTCODINGデザイナ... - [動画編集ソフト！Adobe After EffectsとPremiere Proどっちを利用するべき？](https://fastcoding.jp/blog/all/movie/adobe-after-effects-premiere-pro/): こんにちは。FASTCODINGデザイナ... - [「Webアクセシビリティ」とは？ デザイン制作に意識すべきこと](https://fastcoding.jp/blog/all/ui-ux/webaccessibility/): こんにちは。FASTCODING UI/... - [【YouTube,mp4】 Webサイトに動画掲載する方法まとめ](https://fastcoding.jp/blog/all/webdesign/embed-youtube/): こんにちは。FASTCODINGデザイナ... - [【2024年版】 目的別に無料で使える 動画編集ソフト４選　](https://fastcoding.jp/blog/all/direction/video4/): こんにちは。FASTCODINGデザイナ... - [2024年はWebアクセシビリティが義務化？！今こそ早期対応を！](https://fastcoding.jp/blog/all/info/2024-web-accessibility/): こんにちは。FASTCODING UI/... - [【UI Design Tool】 Figmaと XDとSketchの分かりやすく比較まとめ](https://fastcoding.jp/blog/all/info/xd-figma-sketch/): こんにちは。FASTCODINGデザイナ... - [【YouTube,mp4】 Webサイトに動画を上手に利用しているサイト](https://fastcoding.jp/blog/all/info/video1/): こんにちは。FASTCODINGデザイナ... - [【2023年12月】推奨Webサイト横幅サイズとファーストビュー結果](https://fastcoding.jp/blog/all/info/designwidth-2023-12/): こんにちは。FASTCODINGデザイナ... - [「フレーミング効果」を利用して売り上げアップ！ UI/UXデザインに使える具体例をご紹介。](https://fastcoding.jp/blog/all/info/framingeffect/): こんにちは。FASTCODING UI/... - [マイクロコピーとは？効果的な活用方法をご紹介！](https://fastcoding.jp/blog/all/info/microcopy/): こんにちは。FASTCODING UI/... - [ファーストビューを改善してCVアップ！ 制作のポイントとは？](https://fastcoding.jp/blog/all/info/firstview/): こんにちは。FASTCODING UI/... - [キービジュアルやバナー制作で使える！ 印象的な「文字組み」を作るアイディア。](https://fastcoding.jp/blog/all/ui-ux/typography/): こんにちは。FASTCODING UI/... - [UXライティングとは？制作の際、気をつけるべきポイントを解説！](https://fastcoding.jp/blog/all/direction/uxwriting/): こんにちは。FASTCODING UI/... - [WEBデザインの参考に！ ［2023年］トレンド•デザイン傾向まとめ](https://fastcoding.jp/blog/all/info/trend/): こんにちは。FASTCODING UI/... - [色覚特性に配慮して、誰もが使いやすいUIにする方法](https://fastcoding.jp/blog/all/direction/color_vision/): こんにちは。FASTCODING UI/... - [【決定版】コーディング代行会社が説明する、コーディング代行の使い方！](https://fastcoding.jp/blog/all/info/coding_01/): こんにちは。FASTCODINGディレク... - [【Illustrator-Hack_1】イラストレーターでぷっくりした3Dイラストを作ろう](https://fastcoding.jp/blog/all/other/illustrator-hack1/): こんにちは。FASTCODINGデザイナ... - [GoogleマップをWebサイトのデザインに合わせてオシャレにする方法](https://fastcoding.jp/blog/all/info/googlemap-custom/): こんにちは。FASTCODINGデザイナ... - [WEBサイトの色はどうやって決める？ 抑えるべき配色の基本ルールについてご紹介。](https://fastcoding.jp/blog/all/direction/color/): こんにちは。FASTCODING UI/... - [縦に長くなってしまうスマホページの情報設計はどうする？ 最適化して見やすいページにする方法](https://fastcoding.jp/blog/all/webdesign/smartphonedesign/): こんにちは。FASTCODING UI/... - [【2023年5月】Webサイト横幅サイズとファーストビューとフォントサイズ](https://fastcoding.jp/blog/all/info/designwidth-2023-5/): こんにちは。FASTCODINGデザイナ... - [UI改善って何をすればいいの？ 改善のポイント、改善例をご紹介！](https://fastcoding.jp/blog/all/info/improvement/): こんにちは。FASTCODING UI/... - [CVがアップする、LPのストーリー構成について](https://fastcoding.jp/blog/all/direction/lp/): こんにちは。FASTCODING UI/... - [レスポンシブデザインとリキッドデザインの違いを明確にしよう！](https://fastcoding.jp/blog/all/webdesign/responsive-liquid/): こんにちは。FASTCODING Web... - [2022年のUI/UXデザイントレンド、 スクロールテリングとは？](https://fastcoding.jp/blog/all/direction/scrolltelling/): こんにちは。FASTCODING UI/... - [GA4 のレポート画面の見方【1】](https://fastcoding.jp/blog/all/info/ga4-3/): こんにちは。FASTCODING Web... - [ユニバーサル アナリティクス（旧）からGoogleアナリティクス4（新）への移行手順](https://fastcoding.jp/blog/all/info/ga4-2/): こんにちは。FASTCODING Web... - [ユニバーサル アナリティクス（旧）とGoogleアナリティクス4（新）の違い](https://fastcoding.jp/blog/all/info/ga4-1/): こんにちは。FASTCODING Web... - [Facebook、Twitter、Instagram、OGP画像の適切サイズ](https://fastcoding.jp/blog/all/info/ogp-img/): こんにちは。FASTCODING Web... - [レスポンシブ？リキッド？フレキシブル？レイアウトのまとめ](https://fastcoding.jp/blog/all/info/liquid-design/): こんにちは。FASTCODING Web... - [【2022】 目的別のおすすめWebサイトビルダー5選！](https://fastcoding.jp/blog/all/info/website-builders2/): こんにちは。FASTCODING Web... - [DIY! Webサイトビルダー選びのポイント](https://fastcoding.jp/blog/all/info/website-builders1/): こんにちは。FASTCODING Web... - [定番だけど、使い方に注意が必要なUIコンポーネントとは？](https://fastcoding.jp/blog/all/direction/component/): こんにちは。FASTCODING UI/... - [行動喚起を最大化させるには？ 緊急性を高めたCTAでコンバージョンをアップさせる方法](https://fastcoding.jp/blog/all/webdesign/cta/): こんにちは。FASTCODING UI/... - [目を引くアイキャッチを作る方法](https://fastcoding.jp/blog/all/webdesign/eyecatch/): こんにちは。FASTCODING UI/... - [【ページスピード対策】画像処理による改善策](https://fastcoding.jp/blog/all/frontend/%e3%83%9a%e3%83%bc%e3%82%b8%e3%82%b9%e3%83%94%e3%83%bc%e3%83%89%e5%af%be%e7%ad%96_%e7%94%bb%e5%83%8f%e5%87%a6%e7%90%86/): 皆さん、こんにちは！ ファストコーディン... - [【ページスピード対策】Lazy loading（遅延読み込み）による改善策](https://fastcoding.jp/blog/all/frontend/%e3%83%9a%e3%83%bc%e3%82%b8%e3%82%b9%e3%83%94%e3%83%bc%e3%83%89%e5%af%be%e7%ad%96_lazy-loading_%e9%81%85%e5%bb%b6%e8%aa%ad%e3%81%bf%e8%be%bc%e3%81%bf/): 皆さん、こんにちは！ ファストコーディン... - [新しいUIデザインのトレンド「クレイモーフィズム」](https://fastcoding.jp/blog/all/info/claymorphism/): こんにちは。FASTCODINGデザイナ... - [【2022年第1四半期】Webサイト横幅サイズとファーストビュー](https://fastcoding.jp/blog/all/info/designwidth-2022-2/): こんにちは。FASTCODINGデザイナ... - [デザイントレンドを振り返ろう](https://fastcoding.jp/blog/all/webdesign/design-trends/): こんにちは。FASTCODINGデザイナ... - [次世代画像フォーマット「WebP」に対応する方法](https://fastcoding.jp/blog/all/webdesign/website-images-webp/): こんにちは。FASTCODINGデザイナ... - [Webサイトに最適な画像形式は何？](https://fastcoding.jp/blog/all/webdesign/website-images/): こんにちは。FASTCODINGデザイナ... - [視線誘導とは？視線の法則をUIデザインに活用しよう](https://fastcoding.jp/blog/all/direction/gaze/): こんにちは。FASTCODING UI/... - [【保存版】イラストレーターで簡単にできるタイトル文字デザイン](https://fastcoding.jp/blog/all/webdesign/illustrator1/): こんにちは。FASTCODINGデザイナ... - [少しの気遣いで離脱を防ぐ！ 使い心地を良くするUIテクニック](https://fastcoding.jp/blog/all/direction/ui-tips/): こんにちは。FASTCODING UI/... - [オブジェクト指向UI（OOUI）とは？ 設計手法とメリットについて](https://fastcoding.jp/blog/all/direction/ooui/): こんにちは。FASTCODING UI/... - [ワイヤーフレーム制作前に必要となる「情報設計」とは？ 進め方とポイント](https://fastcoding.jp/blog/all/direction/ia/): こんにちは。FASTCODING UI/... - [Web制作を外注する際のポイント。 失敗しないために必要な事前準備とは？](https://fastcoding.jp/blog/all/webdesign/outsourcing/): こんにちは。FASTCODING UI/... - [【2021年版】WordPressを高速化するプラグイン３選](https://fastcoding.jp/blog/all/info/wp-pagespeed/): こんにちは。FASTCODINGデザイナ... - [UIデザインするのに適したツールは？おすすめをご紹介！](https://fastcoding.jp/blog/all/webdesign/designtools/): こんにちは。FASTCODING UI/... - [デザインがしっくりこない原因は何…？ 美しいデザインの法則](https://fastcoding.jp/blog/all/webdesign/designtheory/): こんにちは。FASTCODING UI/... - [モーショングラフィックス徹底解説！活用メリットと2021年のトレンド](https://fastcoding.jp/blog/all/webdesign/motion-graphics/): こんにちは。FASTCODINGデザイナ... - [【Photshop】ピンボケ写真をくっきり補正する](https://fastcoding.jp/blog/all/webdesign/photoshop-tips2/): こんにちは。FASTCODINGデザイナ... - [【Core Web Vitals 5 】コアウェブバイタルの具体的な対策まとめ](https://fastcoding.jp/blog/all/info/corewebvitals-5/): こんにちは。FASTCODINGデザイナ... - [【Core Web Vitals 4 】Google PageSpeed Insights （ページスピードインサイト）の使い方](https://fastcoding.jp/blog/all/info/corewebvitals-4/): こんにちは。FASTCODINGデザイナ... - [【Core Web Vitals 3 】Google Search Console （グーグルサーチコンソール）の使い方](https://fastcoding.jp/blog/all/info/corewebvitals-3/): こんにちは。FASTCODINGデザイナ... - [【Core Web Vitals 2 】Google Search Console （グーグルサーチコンソール）の基本と登録方法](https://fastcoding.jp/blog/all/info/corewebvitals-2/): こんにちは。FASTCODINGデザイナ... - [【Core Web Vitals 1 】コアウェブバイタルとは？詳しく解説](https://fastcoding.jp/blog/all/info/corewebvitals-1/): こんにちは。FASTCODINGデザイナ... - [ミニマルデザインの落とし穴！気をつけたいポイント](https://fastcoding.jp/blog/all/webdesign/minimal/): こんにちは。FASTCODING UI/... - [【Photshop】SNSのアイコンに！人物写真をイラスト風に加工する](https://fastcoding.jp/blog/all/webdesign/photoshop-tips1/): こんにちは。FASTCODINGデザイナ... - [ミニマルデザインとは？ デザインスタイルの変遷とスタイルの特徴を解説！](https://fastcoding.jp/blog/all/direction/designstyle/): こんにちは。FASTCODING UI/... - [【MEGA CREATOR】Facebook、Instagram、Twitter、YouTube用の画像が簡単に作れちゃう便利サイト](https://fastcoding.jp/blog/all/webdesign/mage-creator/): こんにちは。FASTCODINGデザイナ... - [【2021年下半期】Webデザイナー必読！横幅サイズとファーストビューサイズ](https://fastcoding.jp/blog/all/info/designwidth-2021-7/): こんにちは。FASTCODINGデザイナ... - [CVに繋げるUI/UXデザインのポイント（３）](https://fastcoding.jp/blog/all/direction/cvr3/): こんにちは。FASTCODING UI/... - [CVに繋げるUI/UXデザインのポイント（２）](https://fastcoding.jp/blog/all/direction/cvr2/): こんにちは。FASTCODING UI/... - [CVに繋げるUI/UXデザインのポイント（１）](https://fastcoding.jp/blog/all/direction/cvr1/): こんにちは。FASTCODING UI/... - [UIデザインをする上で重要な「インタラクションコスト」とは？](https://fastcoding.jp/blog/all/direction/interactioncost/): こんにちは。FASTCODING UI/... - [UIデザインをする上でのルール・概念](https://fastcoding.jp/blog/all/direction/theory/): こんにちは。FASTCODING UI/... - [【セキュリティ対策】コンピューターウイルスの種類と対策](https://fastcoding.jp/blog/all/info/security-1/): こんにちは。FASTCODINGデザイナ... - [UXをデザインする方法](https://fastcoding.jp/blog/all/direction/uxdesign/): こんにちは。FASTCODING UI/... - [人間中心設計・デザイン思考とは？](https://fastcoding.jp/blog/all/direction/hcd/): こんにちは。FASTCODING UI/... - [「Google Best Things」世界で人気のある商品をゲットしよう！](https://fastcoding.jp/blog/all/info/bestthings/): こんにちは。FASTCODINGデザイナ... - [UI/UXはなぜ必要？重要性と改善方法](https://fastcoding.jp/blog/all/direction/importance_uiux/): こんにちは。FASTCODING UI/... - [ユーザービリティとは](https://fastcoding.jp/blog/all/direction/usability/): こんにちは。FASTCODING UI/... - [UI/UXとは？それぞれの違いを理解しよう](https://fastcoding.jp/blog/all/direction/uiux/): こんにちは。FASTCODING UI/... - [【gfyCat】10分の1以上圧縮！GifアニメをWebM形式に変換してWebサイトに貼り付ける！](https://fastcoding.jp/blog/all/info/gfycat/): ※こちらのサービスは、現在は提供を終了し... - [「cosha」画像と同じ色のシャドウを入れてオシャレにしてみた。](https://fastcoding.jp/blog/all/webdesign/cosha/): こんにちは。FASTCODINGデザイナ... - [高速化機能Lazy-loadingをWordPress 5.7のiframeで標準サポート](https://fastcoding.jp/blog/all/wordpress/wp-news0413/): こんにちは。FASTCODINGデザイナ... - [Googleトップニュース掲載の条件からAMPが必要なくなる！？](https://fastcoding.jp/blog/all/info/g-news0331/): こんにちは。FASTCODINGデザイナ... - [【第三部】4500人に聞いた！2021年最新のフロントエンド開発レポート（和訳）](https://fastcoding.jp/blog/all/info/state-of-frontend-2020-3/): こんにちは。FASTCODINGデザイナ... - [フォントワークス8書体がGoogle Fontsで利用可能に！](https://fastcoding.jp/blog/all/info/fontworks8/): こんにちは。FASTCODINGデザイナ... - [【2021年4月】現場で使える！テキストエフェクトのまとめ](https://fastcoding.jp/blog/all/info/202104-text-animation/): こんにちは。FASTCODINGデザイナ... - [【第二部】4500人に聞いた！2021年最新のフロントエンド開発レポート（和訳）](https://fastcoding.jp/blog/all/info/state-of-frontend-2020-2/): こんにちは。FASTCODINGデザイナ... - [【第一部】4500人に聞いた！2021年最新のフロントエンド開発レポート（和訳）](https://fastcoding.jp/blog/all/info/state-of-frontend-2020-1/): こんにちは。FASTCODINGデザイナ... - [フォントのすべて「Webサイトで使えるフォントはコレ！」](https://fastcoding.jp/blog/all/info/website-font/): こんにちは。FASTCODINGデザイナ... - [【2021年3月】アニメーションが印象に残るサイトのまとめ](https://fastcoding.jp/blog/all/info/202103-animation-site/): こんにちは。FASTCODINGデザイナ... - [【CSS】CSSだけで画像をトリミングできる「object-fit」](https://fastcoding.jp/blog/all/info/object-fit/): こんにちは。FASTCODINGデザイナ... - [「Lazy Load」でページの読み込み速度を向上させる](https://fastcoding.jp/blog/all/info/lazyload/): こんにちは。FASTCODINGデザイナ... - [【アニメーション特集 -6】アニメーションを最適化してパフォーマンスを高める](https://fastcoding.jp/blog/all/info/animation-6/): こんにちは。FASTCODINGデザイナ... - [【アニメーション特集 -5】JavaScriptアニメーションライブラリまとめ（2021年2月版）](https://fastcoding.jp/blog/all/info/animation-5/): こんにちは。FASTCODINGデザイナ... - [【アニメーション特集 -4】JavaScriptアニメーション基本・作り方まとめ](https://fastcoding.jp/blog/all/info/animation-4/): こんにちは。FASTCODINGデザイナ... - [【アニメーション特集 -3】CSSアニメーションライブラリ2021年まとめ](https://fastcoding.jp/blog/all/info/animation-3/): こんにちは。FASTCODINGデザイナ... - [【アニメーション特集 -2】CSSアニメーションの基本・作り方まとめ](https://fastcoding.jp/blog/all/info/animation-2/): こんにちは。FASTCODINGデザイナ... - [【アニメーション特集 - 1】アニメーションはCSSとJSのどちらを使うべきなのか？](https://fastcoding.jp/blog/all/info/animation-1/): こんにちは。FASTCODINGデザイナ... - [【2021注目】フロントエンド開発「静的サイトジェネレータ」](https://fastcoding.jp/blog/all/info/ssg/): こんにちは。FASTCODINGデザイナ... - [主流のデザインソフトでWebデザイン作るときの基本設定](https://fastcoding.jp/blog/all/info/design-tools-setting/): こんにちは。FASTCODINGデザイナ... - [【2021年1月】スマホ用Webデザインはこのアートボードサイズで作ろう！](https://fastcoding.jp/blog/all/info/iphone-size2021jan/): こんにちは。FASTCODINGデザイナ... - [【Illustrator実践】マスコット人形の写真をイラストにしてみよう。](https://fastcoding.jp/blog/all/other/illustrator-1-2/): こんにちは。FASTCODINGデザイナ... - [入力率を高める！お問合わせフォームのデザイン](https://fastcoding.jp/blog/all/info/mail-form/): こんにちは。FASTCODINGデザイナ... - [プロトタイプのユーザーテストが簡単に行える「Maze」](https://fastcoding.jp/blog/all/info/maze/): こんにちは。FASTCODINGデザイナ... - [【2020年版】配色の基本５ポイントと便利ツール5選！](https://fastcoding.jp/blog/all/info/color-scheme/): こんにちは。FASTCODINGデザイナ... - [【Google Fonts 高速化】必要な文字だけを読み込む方法！](https://fastcoding.jp/blog/all/info/google-fonts-subset/): こんにちは。FASTCODINGデザイナ... - [2021年最新バージョンをリリース予定のFont Awesome v6！使った事がない人は必見](https://fastcoding.jp/blog/all/info/font-awesome/): こんにちは。FASTCODINGデザイナ... - [【2020年必須】ページスピードを上げる！PageSpeed Insights対策](https://fastcoding.jp/blog/all/info/pagespeed/): こんにちは。FASTCODINGデザイナ... - [【2020年10月版】デザイナー必読！Webサイト横幅サイズとファーストビューサイズ](https://fastcoding.jp/blog/all/info/designswidth-2020/): こんにちは。FASTCODINGデザイナ... - [ページスピードスコアを上げる！おすすめのWordpressプラグイン](https://fastcoding.jp/blog/all/info/pagespeed-plugin/): こんにちは。FASTCODINGデザイナ... - [今更きけない！構造化データって何？](https://fastcoding.jp/blog/all/info/structured-data/): こんにちは。FASTCODINGデザイナ... - [Can I Use （ブラウザの対応表）をブログに埋め込む](https://fastcoding.jp/blog/all/info/can-i-use/): こんにちは。FASTCODINGデザイナ... - [Googleの新しい検索ランキング指標「Core Web Vitals」とは](https://fastcoding.jp/blog/all/info/web-vitals/): こんにちは。FASTCODINGデザイナ... - [CSSで背景を斜めにデザインする方法まとめ！](https://fastcoding.jp/blog/all/webdesign/css-diagonal-layout/): こんにちは。FASTCODINGデザイナ... - [【保存版】CSS Flexbox プロパティまとめ](https://fastcoding.jp/blog/all/info/css-flexbox2/): こんにちは。FASTCODINGデザイナ... - [UIデザインツールFigma②実践編](https://fastcoding.jp/blog/all/info/figma2/): こんにちは。FASTCODINGデザイナ... - [【2020年版】CSS Flexbox 実践！レイアウトを作る](https://fastcoding.jp/blog/all/info/css-flexbox1/): こんにちは。FASTCODINGデザイナ... - [【2020年版】商用OKな海外のオススメ無料写真素材サイト](https://fastcoding.jp/blog/all/info/photo-sozai2020/): こんにちは。FASTCODINGデザイナ... - [UIデザインツールFigma ①入門編](https://fastcoding.jp/blog/all/info/figma1/): こんにちは。FASTCODINGデザイナ... - [【2020年】新しいデザインのトレンド「ニューモーフィズム」に注目](https://fastcoding.jp/blog/all/info/neumorphism/): こんにちは。FASTCODINGデザイナ... - [手書きのイラストを簡単にベクトルデータ化できるAdobe Capture！](https://fastcoding.jp/blog/all/info/adobe-capture/): こんにちは。FASTCODINGデザイナ... - [【２０２０年】SEO対策はどうなるのか？抑えて置きたいポイント](https://fastcoding.jp/blog/all/info/2020seo/): こんにちは。FASTCODINGデザイナ... - [2020年9月以降、Google検索の表示順位はモバイルサイトが対象へ！SEOへの影響と対応方法まとめ](https://fastcoding.jp/blog/all/info/google-mobile-first-index/): こんにちは。FASTCODINGデザイナ... - [2020年Adobe Flash終了の要因とリスク！HTML5への移行](https://fastcoding.jp/blog/all/info/flash-animation/): こんにちは。FASTCODINGデザイナ... - [WEB制作の修正依頼はAUN「あうん」を使って効率化しよう](https://fastcoding.jp/blog/all/other/tool-aun/): （記事更新：2020年8月18日） こん... - [【２０２０年版】Chrome拡張機能！テーマ別厳選１６](https://fastcoding.jp/blog/all/info/extension2020/): こんにちは。FASTCODINGデザイナ... - [Google BERT の導入により、これまで以上にWebコンテンツが重要になる](https://fastcoding.jp/blog/all/info/googlebert/): こんにちは。FASTCODINGデザイナ... - [リモートワークに最適！外出先からPCを遠隔操作するChromeリモートデスクトップ](https://fastcoding.jp/blog/all/info/remote-desktop/): こんにちは。FASTCODINGデザイナ... - [【2020年12月版】Sketchで絶対入れたいプラグイン7選](https://fastcoding.jp/blog/all/info/sketch-plugin2020/): こんにちは。FASTCODINGデザイナ... - [Webアクセシビリティ対応②　<実装編>　チェックリスト17項目](https://fastcoding.jp/blog/all/info/accessibility-2/): こんにちは。FASTCODINGデザイナ... - [Webアクセシビリティ対応①　基礎編](https://fastcoding.jp/blog/all/info/accessibility-1/): こんにちは。FASTCODINGデザイナ... - [【4】マテリアルデザイン践実　③カードのルールと使い方](https://fastcoding.jp/blog/all/info/material-design4/): こんにちは。FASTCODINGデザイナ... - [【3】マテリアルデザイン実践　②ボタンのルールと作り方](https://fastcoding.jp/blog/all/webdesign/material-design3/): こんにちは。FASTCODINGデザイナ... - [【2】マテリアルデザイン実践　①カラーの選び方](https://fastcoding.jp/blog/all/webdesign/material-design2/): こんにちは。FASTCODINGデザイナ... - [【1】これまでのデザインとマテリアルデザイン](https://fastcoding.jp/blog/all/info/material-design1/): こんにちは。FASTCODINGデザイナ... - [【2】Sketchの導入方法と基本操作](https://fastcoding.jp/blog/all/webdesign/2019sketch-2/): こんにちは。FASTCODINGデザイナ... - [【1】WebデザイナーがSketchを使う理由](https://fastcoding.jp/blog/all/webdesign/2019sketch-1/): こんにちは。FASTCODINGデザイナ... - [Googleしごと検索（Google for jobs）がついに日本上陸！構造化データなど対応方法まとめ](https://fastcoding.jp/blog/all/info/google-for-jobs/): こんにちは。FASTCODINGです。 ... - [Google MAPS APIが7/16有料化？地図を埋め込んでいるサイトは要確認！](https://fastcoding.jp/blog/all/jquery/google-maps-no-longer-free/): こんにちは。FASTCODINGです。 ... - [Googleマップをサイトに追加する方法](https://fastcoding.jp/blog/all/jquery/howtoaddgooglemap/): こんにちは。ベトナムオフィスのThanh... - [日本だからって無視出来ない！WordpressをGDPR対応するには](https://fastcoding.jp/blog/all/info/gdpr/): こんにちは。 FASTCODINGです。... - [jQueryによるフォームの検証](https://fastcoding.jp/blog/all/jquery/jquery-form-validation/): ※こちらのプラグインはかなり古くなってし... - [サイト移転に必須!!301リダイレクトの為の.htaccess書き方5選](https://fastcoding.jp/blog/all/frontend/htaccessredirect/): WEBサイトの引越しの際、忘れてはいけな... - [jQueryを使うには何を準備したらいいの？jQueryことはじめ](https://fastcoding.jp/blog/all/jquery/jquerybeginner/): ホームページを、より魅力的に見せたりユー... - [どれを選ぶ？導入シェアから見るオススメCMSツール紹介](https://fastcoding.jp/blog/all/direction/cmsshare/): こんにちは。ファストコーディングです。 ... - [【2018年4月版】もう迷わない！Webサイト横幅サイズの大正解](https://fastcoding.jp/blog/all/webdesign/designswidth-2018/): こんにちは、FASTCODINGです。 ... - [2017年終盤の今、常時SSL化を急がねばならない理由＜後編＞](https://fastcoding.jp/blog/all/info/%e5%b8%b8%e6%99%82ssl%e5%8c%96%e3%82%92%e6%80%a5%e3%81%8c%e3%81%ad%e3%81%b0%e3%81%aa%e3%82%89%e3%81%aa%e3%81%84%e7%90%86%e7%94%b1_%e5%be%8c%e7%b7%a8/): こんにちは、ファストコーディングです。 ... - [2017年終盤の今、常時SSL化を急がねばならない理由＜中編＞](https://fastcoding.jp/blog/all/info/%e5%b8%b8%e6%99%82ssl%e5%8c%96%e3%82%92%e6%80%a5%e3%81%8c%e3%81%ad%e3%81%b0%e3%81%aa%e3%82%89%e3%81%aa%e3%81%84%e7%90%86%e7%94%b1_%e4%b8%ad%e7%b7%a8/): こんにちは、ファストコーディングです。 ... - [2017年終盤の今、常時SSL化を急がねばならない理由＜前編＞](https://fastcoding.jp/blog/all/info/%e5%b8%b8%e6%99%82ssl%e5%8c%96%e3%82%92%e6%80%a5%e3%81%8c%e3%81%ad%e3%81%b0%e3%81%aa%e3%82%89%e3%81%aa%e3%81%84%e7%90%86%e7%94%b1_%e5%89%8d%e7%b7%a8/): こんにちは、ファストコーディングです。 ... - [WordPressを導入した方が良い理由](https://fastcoding.jp/blog/all/frontend/wordpress%e3%82%92%e5%b0%8e%e5%85%a5%e3%81%97%e3%81%9f%e6%96%b9%e3%81%8c%e8%89%af%e3%81%84%e7%90%86%e7%94%b1/): こんにちは！ディレクターの楠本と申します... - [【初心者編】Googleアナリティクス基礎：トラッキングコードの取得・設置](https://fastcoding.jp/blog/all/frontend/googleanalytics-trackingcode/): どうもディレクター楠本です。 前回のブロ... - [【コピペ】HTMLフォームのselect項目まとめ(生年月日・年齢・都道府県・職業)](https://fastcoding.jp/blog/all/frontend/form-select/): こんにちは、ディレクターのせりなです。 ... - [Retina対応のWebデザインをするときの注意点](https://fastcoding.jp/blog/all/webdesign/retina-weddesign/): こんにちは、ディレクターのせりなです。 ... - [新人WebディレクターのためのWeb業界用語【初心者用】](https://fastcoding.jp/blog/all/direction/director-words/): こんにちは、ディレクターのせりなです。 ... - [Google web fontsの雰囲気別おすすめ30選！Webフォントを導入しよう！](https://fastcoding.jp/blog/all/webdesign/google-webfonts-recommended/): こんにちは、ディレクターのせりなです。 ... - [【簡単】Webフォントの使い方！Google web fontsを使ってみよう](https://fastcoding.jp/blog/all/webdesign/web-fonts/): こんにちは、ディレクターのせりなです。 ... - [【WordPress初心者】使い方と注意点まとめ！](https://fastcoding.jp/blog/all/direction/wp_howtouse/): こんにちは、ディレクターのせりなです。 ... - [【レスポンシブ】PCとスマホで違う画像に切り替える方法！CSSだけで簡単画像切り替え！](https://fastcoding.jp/blog/all/frontend/responsive_img/): こんにちは！ディレクターのせりなです。 ... - [HTML5.1を使ってSEOに強いセマンティックコーディングをする方法](https://fastcoding.jp/blog/all/html5toseo/): FASTCODINGの波乗りディレクター... - [【初心者向け】HTML、CSS、JavaScriptの違いと役割について](https://fastcoding.jp/blog/all/jquery/html-css-javascript/): こんにちは、ディレクターのせりなです。 ... - [【WordPress】記事をランダムに表示させる方法！プラグイン不要！](https://fastcoding.jp/blog/all/system/wordpress-random/): FASTCODING-Vietnamのバ... - [初めてのSchema.org(スキーマ)](https://fastcoding.jp/blog/all/info/schema-org/): FASTCODINGの波乗りディレクター... - [JavaとJavaScriptの違いが簡単にわかる！初心者のためのWeb講座](https://fastcoding.jp/blog/all/jquery/java-javascript/): どうも、ディレクターのせりなです。 IT... - [【SEO対策】HTMLページをAMP対応化する詳しい方法と、本当にAMPで良いの？](https://fastcoding.jp/blog/all/frontend/amporpwa/): FASTCODINGの波乗りディレクター... - [AMP対応のメリット・デメリット、導入する？](https://fastcoding.jp/blog/all/info/amp/): FASTCODINGの波乗りディレクター... - [WordPressの脆弱性対策！すぐにバージョンアップしていいの？更新方法・手順とは](https://fastcoding.jp/blog/all/wordpress/updating-of-wordpress/): こんにちは、ディレクターのせりなです。 ... - [Webサイトの表示速度を改善する3つの方法！Google PageSpeed Insightsとは？～初心者編～](https://fastcoding.jp/blog/all/seo/google-pagespeed/): ※2019年6月25日追記 Google... - [【決定版】WordPressの引っ越し！サーバー移行・移転手順](https://fastcoding.jp/blog/all/system/moving-wordpress/): はじめに 　ファストコーディングのシステ... - [Webサイトデザインの横幅サイズ！もう何pxか迷わない！ 2017年1月版](https://fastcoding.jp/blog/all/webdesign/designswidth/): 2021年、最新のWebデザインの横幅サ... - [なぜJavaScriptを使う？その強みとは？](https://fastcoding.jp/blog/all/frontend/whyjs/): FASTCODINGの波乗りディレクター... - [コーディング指示書の書き方！Web制作の入稿前にディレクター・デザイナーが確認したい5つのこと](https://fastcoding.jp/blog/all/direction/codingspec/): おはようございます！ FASTCODIN... - [絶対パス、相対パス、ルートパスの違いってなに？メリット・デメリットは？](https://fastcoding.jp/blog/all/frontend/path/): FASTCODINGディレクターのせりな... - [Webデザイナー必見！メインビジュアルのデザイン参考サイト！](https://fastcoding.jp/blog/all/webdesign/mainvisual/): はじめまして。 ディレクター(兼デザイナ... - [HTML5で効果的な動画演出!！？](https://fastcoding.jp/blog/all/jquery/html5move/): 自分が知らなかったものをメモとして残しま... - [4月21日までにスマホ対応しないとマズイ！？](https://fastcoding.jp/blog/all/info/0421spsite/): 皆様このニュースはご存知の方が多いかと思... - [ベトナムオフィス移転のお知らせ](https://fastcoding.jp/blog/all/other/%e3%83%99%e3%83%88%e3%83%8a%e3%83%a0%e3%82%aa%e3%83%95%e3%82%a3%e3%82%b9%e7%a7%bb%e8%bb%a2%e3%81%ae%e3%81%8a%e7%9f%a5%e3%82%89%e3%81%9b/): ３月１日よりベトナムオフィスを下記の場所... - [コーディング外注の仕方はどうやるの？ポイントは○個？](https://fastcoding.jp/blog/all/direction/coding_point/): こんにちは！ 最近はクライアント様のとこ... - [RSS取得はどう行うのか？](https://fastcoding.jp/blog/all/frontend/rss-get/): 先日ページ内にgoogleのapiを使っ... - [AUTOCODINGリリース](https://fastcoding.jp/blog/all/info/autocoding%e3%83%aa%e3%83%aa%e3%83%bc%e3%82%b9/): FASTCODINGではないのですが、 ... - [画像容量軽減ツール２つの紹介](https://fastcoding.jp/blog/all/frontend/reduction/): 週に１回は更新をしようと思っていたのです... - [webでhtmlを学ぶ（codeprep）](https://fastcoding.jp/blog/all/frontend/codeprep/): 現在はweb上で勉強ができるという良い時... - [よく使うhtmlタグの振り返り7つ](https://fastcoding.jp/blog/all/frontend/htmltag/): 今回はSEOに強いタグの設定、第3段の紹... - [Titleタグ・metaタグの設定のポイントは11点](https://fastcoding.jp/blog/all/frontend/tagpoint/): FASTCODINGのBLOGをご覧頂き... - [altタグの設定のポイントは3点](https://fastcoding.jp/blog/all/frontend/alttag/): FASTCODINGブログをご覧頂き、あ... - [Bookmark登録しているサイトデザイン集12サイトの紹介](https://fastcoding.jp/blog/all/info/bookmark/): 私がWebサイトやコーディングを参考にす... - [HTMLコーディングとは](https://fastcoding.jp/blog/all/info/coding/): HTMLコーディングについてWeb業界で... - [コーディング請負体制](https://fastcoding.jp/blog/all/info/project/): FASTCODINGのコーディング請負体... - [オフショアコーディング](https://fastcoding.jp/blog/all/info/offshore/): FASTCODINGは、ベトナム人のコー... - [ご挨拶](https://fastcoding.jp/blog/all/info/greeting/): 皆さんこんにちは！FASTCODINGの... --- # # Detailed Content ## 投稿 ### 【最新】HTMLコーディング代行会社 検索上位10社比較（2025年4月） - Published: 2025-04-28 - Modified: 2025-04-28 - URL: https://fastcoding.jp/blog/all/info/hikaku_202504/ - カテゴリー: Web業界の動向・情報, フロントエンド - タグ: Web業界の動向, ディレクション, フロントエンド, 価格 こちらの記事では、コーディング代行を利用される利用者様のために、定期的に各社のWebサイトに書いてある情報をまとめています。 今回は、2025年4月現在の最新のウェブ検索結果をもとに、HTMLコーディング代行会社の検索で上位に入っている9社と自社を含む計10社の料金体系について比較し、まとめました。 HTMLコーディング代行を利用される際はぜひ一度チェックしてみてください。 ※すべてWebサイトに公開されている情報のため、実際にご依頼された場合に異なる可能性があります。あくまで参考としてご覧くだ... --- ### 「Webディレクター必携 ─ 現場経験から導いた“フロント制作 完全ガイド”」　Vol.2　レスポンシブ対応の落とし穴 ─ ブレイクポイントだけじゃ防げないUI崩れ - Published: 2025-04-24 - Modified: 2025-04-22 - URL: https://fastcoding.jp/blog/all/info/web-direction-guide02/ - カテゴリー: Web業界の動向・情報, ディレクション, フロントエンド - タグ: UI/UX, ディレクション, フロントエンド設計, レスポンシブ設計 UIUXのレスポンシブ対応はPCとスマホだけでなく、中間画面サイズや実データの影響を考慮して設計しなければなりません。弊社で実際に使っているコツをお教えいたします！ 1. はじめに：「レスポンシブ対応済み」と言っても... フロントエンドのコーディング代行をしていると、デザイン確認の際によくこんなやりとりがあります。 「PCとスマホのデザインはそれぞれ作ってあるので、あとは切り替えだけお願いします」「このデザインでレスポンシブ対応、問題ないですよね？」 こうした言葉をいただいたとき、実装者として私が最初に確認するのは、“その間のサイズがどうなっているか”です。なぜなら、「PCとスマホの2画面だけでは不十分なケース」が非常に多いからです。 表示が“切り替わる”... --- ### 【このデザイン、どうコーディングする？ 】#3｜JSなしでスクロール連動フェードイン。CSSだけでここまでできる！ - Published: 2025-04-22 - Modified: 2025-04-28 - URL: https://fastcoding.jp/blog/all/frontend/css-scroll-fadein/ - カテゴリー: HTML/CSS, フロントエンド - タグ: CSS, HTML, JavaScript, スクロールフェードイン, フェードイン 弊社で実際に使っているCSSだけでスクロール連動アニメーションを簡単に実装できる方法を解説。特にanimation-timelineと:has()を活用することで、JavaScriptなしでも自然なフェードインが実現可能です。 スクロール連動アニメーション、実はCSSだけでもかなり自然にできます！ スクロールに合わせて要素がふわっと現れるアニメーション、コーディングを毎日作っている弊社も何度も実装してきました。多くの場面では IntersectionObserver を使ったJavaScript実装が定番ですが、「そこまでしなくても良いのでは？」と感じるケースも少なくありません。 特に最近では、「とにかく軽く仕上げたい」「JSが使えない環境でも動かしたい」という要望が増えていて、CSSだけで完結する方法を模索することも... --- ### 「Webディレクター必携 ─ 現場経験から導いた“フロント制作 完全ガイド”」　Vol.1　なぜ“デザイン通り”に見えない？実装現場が語る、再現性の限界と理由 - Published: 2025-04-18 - Modified: 2025-04-28 - URL: https://fastcoding.jp/blog/all/info/web-direction-guide01/ - カテゴリー: Web業界の動向・情報, ディレクション, フロントエンド - タグ: PM, Web業界の動向, ディレクション デザインとコーディングの「ズレ」は、技術的な限界や前提の違いによるものであり、単なるミスではありません。フロントエンドエンジニアは見た目の一貫性を保つために調整を行い、Webディレクターは再現性の限界を理解することが大切です。 1. はじめに：なぜ“デザイン通り”にならないのか？ Webディレクターとして、こんな経験はありませんか？ 「Figmaでは完璧だったのに、コーディング後に見たら何か違う... 」「ボタンの位置、ズレてない？」「このフォント、ちょっと太く見えない？」 Webディレクターの方から、これまでに何度もいただいてきた言葉です。 一見すると「コーダーのミスでは？」と思われがちですが、フロントエンドのコーディング代行を専門にしている私の立場から言うと、“技術的な限界”や“前提の違い”が原因であるケースがほと... --- ### 【このデザイン、どうコーディングする？ 】#02「Pinterest風の高さバラバラな要素をスマートに整列させる方法」 - Published: 2025-04-14 - Modified: 2025-04-12 - URL: https://fastcoding.jp/blog/all/ui-ux/pinterest-layout-css/ - カテゴリー: HTML/CSS, UI/UX - タグ: CSS, HTML, Pinterest Pinterest風のグリッドレイアウトを実装する方法について解説します。CSS Gridのgrid-auto-flow: denseやマルチカラムレイアウトを使用し、高さの異なるカードを整然と並べます。使用ケースやメリット・デメリットを考慮し、実務に役立つ技術を提案しています。 Webでよく見る、Pinterestのように高さの異なるカードをきれいに並べたグリッドレイアウト。見た目はシンプルですが、実装しようとすると「高さバラバラなのに、どうしてこんなに整ってるの？」と迷うことも多いデザインのひとつです。 【このデザイン、どうコーディングする？】シリーズ第2回では、そんな不揃いなカードを整列させるスマートな方法を取り上げます。 CSS Gridのgrid-auto-flow: dense、マルチカラムレイアウト（column-count）、そして比較対象としてJavaS... --- ### 【このデザイン、どうコーディングする？ 】#01「スマホで横スライド！比率固定のカルーセルUIをCSSだけで作る方法」 - Published: 2025-04-09 - Modified: 2025-04-08 - URL: https://fastcoding.jp/blog/all/html-css/carousel-by-css/ - カテゴリー: HTML/CSS - タグ: CSS, CSSアニメーション, JavaScript このブログシリーズでは、モダンなUIデザインをシンプルに実装する方法を紹介します。第1回は、スマホサイト向けの横スライド型カルーセルUIをcssのみで実現する手法を解説。実装ポイントや柔軟なスタイル設定についても触れています。 Webデザインを見ていて「これ、どうやって実装するんだろう？」と思うことはありませんか？ このブログシリーズ【このデザイン、どうコーディングする？】では、日々の現場で見かけるモダンなUIデザインを、できるだけシンプルに、でも本質的に実装する方法を紹介していきます。 第1回となる今回は、スマホサイトでよく見かける横スライド型のカルーセルUIを、CSSだけで軽量に実装する方法を取り上げます。 それでは早速、完成イメージから見ていきましょう。 実装イメージ＆HTML構造 まずは今回実装するカルーセルU... --- ### いまさら聞けない！CSSでレイアウトを決めるプロパティと具体的な使い方 - Published: 2025-04-02 - Modified: 2025-04-06 - URL: https://fastcoding.jp/blog/all/frontend/css-layout-properties/ - カテゴリー: HTML/CSS, フロントエンド - タグ: CSS, グリットレイアウト, フレキシブルレイアウト, リキッドレイアウト, レスポンシブレイアウト Web制作をしていると、「このレイアウト、どうやって実装すればいいんだろう？」と悩むことはありませんか？HTMLやCSSの基本は知っているけれど、レイアウトを組む方法がいまいちわからない、あるいは 「いつもFlexboxしか使っていないけど、他にもっと適した方法があるのでは？」 と考えたことがある人もいるかもしれません。 この記事では、CSSのレイアウト方法を具体的なシチュエーションごとに紹介し、どのプロパティをどのように使えばよいのかを解説します。 「なんとなくやっているけど、もっと適切な方法... --- ### これだけは押さえたい！リスクを回避オープンソースライブラリ活用とライセンスの基本 - Published: 2025-03-25 - Modified: 2025-04-06 - URL: https://fastcoding.jp/blog/all/info/what-licenses-are-better/ - カテゴリー: Web業界の動向・情報, システム開発 - タグ: Apache License, BSD License, GNU, MIT License, Web業界の動向 WEBサイトやWEBシステムを作るとき、オープンソースライブラリを使うことってよくありますよね。でも、ライブラリにはそれぞれ違ったライセンスがついていて、条件をちゃんと守らないとトラブルの原因になることも。 この記事では、リスクを減らすためのライセンス選びのポイント、避けたほうがいいライセンス、利用時の具体的な方法、そして改変や特許出願をする場合の注意点を分かりやすく説明します。 ※本記事は弊社調べとなり、法律的に確実な情報をご提供するものではありません。法務上必要な場合は、必ずご自身や法務部門... --- ### 【コーディング屋のネタ帳】データ可視化はこれで決まり！散布図作成に役立つJavaScriptライブラリ5選 - Published: 2025-03-17 - Modified: 2025-03-15 - URL: https://fastcoding.jp/blog/all/frontend/javascript-scatter-plot-plugins/ - カテゴリー: システム開発, フロントエンド - タグ: Chart.js, Google Charts, JavaScript, グラフ, プラグイン データを視覚的に伝えるためのレーダーチャートをJavaScriptで実装する方法について解説しています。特に、レーダーチャートの特徴、活用例、利点・欠点、人気のJavaScriptライブラリを比較し、導入方法やカスタマイズについても細かく説明しています。適切なライブラリ選定をサポートします。 データをわかりやすく伝える方法のひとつに「グラフ」があります。本シリーズでは、さまざまなグラフの特徴や使い方を紹介し、Webサイトで簡単に使えるJavaScriptライブラリも解説しています。 これまでに、棒グラフ・円グラフ・折れ線グラフ・レーダーチャートを取り上げてきました。今回は、散布図（スキャッタープロット）に注目します。散布図は、2つの数値データをXY座標上に配置して、データの分布や関係性を視覚的に表現するグラフで、データの傾向や相関を見つけるのによく使われます。 この記事は、次のような... --- ### 【コーディング屋のネタ帳】データ可視化はこれで決まり！レーダーチャート作成に役立つJavaScriptライブラリ5選 - Published: 2025-02-26 - Modified: 2025-02-24 - URL: https://fastcoding.jp/blog/all/frontend/javascript-radar-chart-plugins/ - カテゴリー: システム開発, フロントエンド - タグ: Chart.js, Google Charts, JavaScript, グラフ, プラグイン データを視覚的に伝えるためのレーダーチャートをJavaScriptで実装する方法について解説しています。特に、レーダーチャートの特徴、活用例、利点・欠点、人気のJavaScriptライブラリを比較し、導入方法やカスタマイズについても細かく説明しています。適切なライブラリ選定をサポートします。 Webサイト上でデータを視覚的にわかりやすく伝える方法として、グラフは欠かせません。本シリーズでは、グラフの種類ごとに特長や活用シーンを紹介し、それを簡単に実装できるJavaScriptライブラリを解説しています。 これまでに、棒グラフ、円グラフ、折れ線グラフを紹介してきましたが、今回はレーダーチャートに注目します。レーダーチャートは、複数の指標をバランスよく比較できるグラフで、スキル評価や製品比較などに活用されます。 この記事は、次のような人に向けて書いています。 Webサイトにグラフを取り入... --- ### 【コーディング屋のネタ帳】データ可視化はこれで決まり！折れ線グラフ作成に役立つJavaScriptライブラリ5選 - Published: 2025-02-17 - Modified: 2025-02-17 - URL: https://fastcoding.jp/blog/all/frontend/javascript-line-graph-plugins/ - カテゴリー: システム開発, フロントエンド - タグ: Chart.js, Google Charts, JavaScript, グラフ, プラグイン データをわかりやすく伝える手段として、グラフはとても便利ですよね。本シリーズでは、Webサイトでよく使われるグラフの種類と、それを簡単に表示できるJavaScriptライブラリを紹介しています。 これまでに、割合を示すのに適した円グラフ、項目ごとの数値を比較しやすい棒グラフについて解説してきました。 そして3回目となる今回は、折れ線グラフ。折れ線グラフは、売上やアクセス数の変化、気温の推移など、時間の経過とともに変化するデータを表現するのに最適です。本記事では、折れ線グラフの特徴や活用シーンを紹... --- ### AUN座談会に参加しました！ - Published: 2025-02-06 - Modified: 2025-02-06 - URL: https://fastcoding.jp/blog/all/info/aun/ - カテゴリー: Web業界の動向・情報, ディレクション, 便利サービス - タグ: Web業界の動向, ディレクション, 作業効率化 先日、弊社でも大変お世話になっている「AUN」を運営されている株式会社フォノグラム様にご訪問し、業務効率化についての座談会に参加してきました！ ↓ 記事はこちらのバナーから！　↓ そもそも、皆さま「AUN」というツールはご存知でしょうか？ ファストコーディングを利用している方なら一度は使ったことがあるとは思いますが、簡単にどんなツールなのかご紹介させていただきます！ 「AUN」って？ 「AUN」とは、オンライン上で画像やURLを貼り付けて、その上からメモを書いて他の人と共有することができるツール... --- ### 【最新】HTMLコーディング代行会社 検索上位10社比較（2025年1月） - Published: 2025-01-28 - Modified: 2025-01-28 - URL: https://fastcoding.jp/blog/all/info/hikaku_202501/ - カテゴリー: Web業界の動向・情報, フロントエンド - タグ: Web業界の動向, ディレクション, フロントエンド こちらの記事では、コーディング代行を利用される利用者様のために、定期的に各社のWebサイトに書いてある情報をまとめています。 今回は、2025年1月現在の最新のウェブ検索結果をもとに、HTMLコーディング代行会社の検索で上位に入っている9社と自社を含む計10社の料金体系について比較し、まとめました。 HTMLコーディング代行を利用される際はぜひ一度チェックしてみてください。 ※すべてWebサイトに公開されている情報のため、実際にご依頼された場合に異なる可能性があります。あくまで参考としてご覧くだ... --- ### 【コーディング屋のネタ帳】データ可視化はこれで決まり！円グラフ作成に役立つJavaScriptライブラリ5選 - Published: 2025-01-17 - Modified: 2025-01-16 - URL: https://fastcoding.jp/blog/all/frontend/javascript-circle-graph-plugins/ - カテゴリー: システム開発, フロントエンド - タグ: JavaScript, グラフ, プラグイン 最近、データのビジュアル化が注目されており、Webサイトでもさまざまな形式のグラフが使われるようになりました。たとえば、会社の予算配分をわかりやすく示したり、製品の市場シェアを視覚的に伝えたりする場面でよく利用されています。こうしたグラフは、データの割合や構成を簡単に把握できる点で、多くの人にとって便利なツールとなっています。 今回のテーマは「円グラフ」。前回の記事で紹介した棒グラフとは異なり、全体に対する各データの割合を直感的に示すのに適した円グラフにフォーカスし、その特徴や活用方法、さらに円... --- ### ＜みんな気になる＞コーディング代行会社のよくある用語とその解説 - Published: 2025-01-16 - Modified: 2025-01-16 - URL: https://fastcoding.jp/blog/all/info/coding_keywords/ - カテゴリー: Web業界の動向・情報, ディレクション - タグ: HTML, ディレクション, 初心者 コーディング代行会社を調べていると、各社色々な特徴や強みがありますが、それと同時に料金や検証環境などに色々な違いがあります。 今回は、基本料金からレスポンシブ対応時のページ単価、さらにサポート状況やブラウザ対応範囲までを検証してみました。 目次 基本料金比較 ページ単価とレスポンシブ対応料金 サポート対応状況とブラウザ対応範囲 まとめ 基本料金比較 まず初めに、基本料金について比較してみましょう。 「基本料金」とは、依頼するページ数や内容に関係なくかかる費用 何が含まれるかは各社によって異なりま... --- ### 【完全版】絶対に失敗しない！WordPressの引っ越し《その6～引っ越し後の動作確認編～》 - Published: 2025-01-10 - Modified: 2025-01-11 - URL: https://fastcoding.jp/blog/all/wordpress/wordpress-moving-step6/ - カテゴリー: WordPress - タグ: WordPress, サーバ引っ越し DNSの切り替えが完了したら、新しいサーバでWebサイトが見えていると思います。でも表面上は問題ないように思えても、細かいところでバグが出ているかもしれません。やはり完全に引っ越しが終わったと言えるのは、「動作確認」をきちんとしてからだと思います。す。 このステップでは、新しいサーバ上でWordPressサイトが正しく動作しているかを確認するための手順とチェックポイントについて解説します。 サイト全体の表示確認 まずは、サイト全体が正しく表示されているかを確認します。具体的には、次の点を確認して... --- ### 【完全版】絶対に失敗しない！WordPressの引っ越し《その5～DNSの切り替え編～》 - Published: 2025-01-10 - Modified: 2025-01-11 - URL: https://fastcoding.jp/blog/all/wordpress/wordpress-moving-step5/ - カテゴリー: WordPress - タグ: WordPress, サーバ引っ越し いままでの流れで、既に新しいサーバにはWordPressのすべてのデータが引っ越しされています。しかしながら、　https://www. ****. jp　等のドメイン名を使ったURLでアクセスしても、実はまだ古いサーバを見ている状態になっています。これはドメイン　と　Webサーバは別々に管理されているからで、この後ご案内する「DNSの切り替え」をもって、全ての引っ越しが完了となります。 この章ではドメインについて（少しだけ）と、その切替方法についてご案内します。 なお、この章に記載の内容を行う... --- ### 【完全版】絶対に失敗しない！WordPressの引っ越し《その4～リストア（アップロード）編～》 - Published: 2025-01-10 - Modified: 2025-01-11 - URL: https://fastcoding.jp/blog/all/wordpress/wordpress-moving-step4/ - カテゴリー: WordPress - タグ: WordPress, サーバ引っ越し ファイルデータとデータベースのバックアップが完了したら、次のステップはそれらを新しいサーバへリストア（アップロード）することです。 バックアップしたデータをアップロードするだけ、、、になるのですが、実際にはファイルとデータベース各々で作業が必要になり、またwp-config. phpという、WordPressの設定ファイルの更新も必要です。この章では、ファイルデータとデータベースを新サーバにリストア（アップロード）する際の具体的な手順を解説します。 ファイルデータのリストア まず、バックアップし... --- ### 【完全版】絶対に失敗しない！WordPressの引っ越し《その3～バックアップ編～》 - Published: 2025-01-10 - Modified: 2025-01-08 - URL: https://fastcoding.jp/blog/all/wordpress/wordpress-moving-step3/ - カテゴリー: WordPress - タグ: WordPress, サーバ引っ越し サーバの選定が完了したら、次に行うべきステップは「ファイルデータとデータベースのバックアップ」です。これはWordPressサイトの引っ越し作業の中で最も重要な作業の一つなので、確実におこないましょう。 というのも、移行中に万が一問題が発生した場合でも元の状態に戻すことができるからです。バックアップが無ければ、データは無くなる可能性があるとご認識ください。 この章では、バックアップを行う際の具体的な手順とポイントについて説明します。 基本のバックアップ方法（弊社のおすすめ） ファイルデータのバッ... --- ### 【完全版】絶対に失敗しない！WordPressの引っ越し《その2～サーバ選定編～》 - Published: 2025-01-10 - Modified: 2025-01-08 - URL: https://fastcoding.jp/blog/all/wordpress/wordpress-moving-step2/ - カテゴリー: WordPress - タグ: WordPress, サーバ引っ越し さて、Wordpress引っ越し作業の連載第二回となる今回は、サーバの選定方法についてお話いたします。 WordPressの引っ越しにおいて、最初に行うべき重要なステップは「サーバの選定」。でもサーバって多いですよね。 まずはサーバにはどんな種類があって、各々にどういうメリット／デメリットがあるかを理解しておきましょう。 サーバの種類 レンタルサーバ おそらく最も耳にするのが『レンタルサーバ』。これは一台の大きいサーバという種類のパソコンを皆で間借りしている、いわばマンションの部屋を借りるみたい... --- ### 【完全版】絶対に失敗しない！WordPressの引っ越し - Published: 2025-01-10 - Modified: 2025-01-08 - URL: https://fastcoding.jp/blog/all/wordpress/wordpress-moving-step1/ - カテゴリー: WordPress - タグ: WordPress, サーバ引っ越し WordPress関連で、おそらくお客様が一番悩まれるのが『サーバの引っ越し』ではないでしょうか。というのも、弊社に緊急でお電話いただく案件で、もっとも多い話題の一つが「Wordpress引っ越し中のトラブル」なんです。 インストールも使い勝手も簡単なWordPressではありますが、こと引っ越し作業になるとWordPressだけの話では収まりません。 サーバやドメイン、さらにはサーバに入っているPHPのバージョンやエクステンションの状態、DBサーバのバージョンなどなど、WordPressの引っ... --- ### 【コーディング屋のネタ帳】データ可視化はこれで決まり！棒グラフ作成に役立つJavaScriptライブラリ5選 - Published: 2025-01-08 - Modified: 2025-01-08 - URL: https://fastcoding.jp/blog/all/frontend/javascript-bar-graph-plugins/ - カテゴリー: システム開発, フロントエンド - タグ: JavaScript, グラフ, プラグイン 最近、Webサイトでデータをグラフにして見せることが増えてきました。たとえば、会社案内ページで売上や業績の推移をグラフにしてわかりやすくしたり、アンケート結果をビジュアルで示したりする例がよくあります。こうしたグラフは、パッと見ただけで情報が伝わりやすく、見る人にとっても便利ですよね。 そんなグラフの中でも今回は、棒グラフに着目。特徴とともに、棒グラフを簡単に作れるJavaScriptのライブラリを紹介します。 この記事は、次のような人に向けて書いています。 Webサイトにグラフを取り入れたい新... --- ### 【最新】HTMLコーディング代行会社 おすすめ6社比較（2024年11月） - Published: 2024-11-13 - Modified: 2024-11-13 - URL: https://fastcoding.jp/blog/all/info/hikaku_202411/ - カテゴリー: Web業界の動向・情報, フロントエンド - タグ: Web業界の動向, ディレクション, フロントエンド 最新のウェブ検索結果をもとに、HTMLコーディング代行会社の上位6社の料金体系について比較し、まとめました。 HTMLコーディング代行を利用される際はぜひ一度チェックしてみてください。 HTMLコーディング代行会社 料金比較 料金比較時のポイント 追加サービスの料金 多くの会社で、基本のコーディング費用に加え、SEO対策や画像の最適化、JavaScriptのカスタマイズなど、追加サービスに対して別途料金が発生します。これらの費用はプロジェクトの範囲や要件によって異なるため、見積もり時に必ず確認し... --- ### 【コーディング屋のネタ帳】簡単に実装できるスクロールアニメーション3選 - Published: 2024-11-11 - Modified: 2024-11-11 - URL: https://fastcoding.jp/blog/all/info/easy-scroll-animations-by-css/ - カテゴリー: Web業界の動向・情報, 便利サービス - タグ: JavaScript, アニメーション 最近のWEBサイトでは、スクロールに合わせて要素がふわっと現れる「スクロールアニメーション」をよく見かけますよね。動きのあるデザインを加えることで、ユーザーの興味を引きつけ、ページにインパクトを与えることができます。ただ、JavaScriptの知識があまりないと「アニメーションの設定が複雑なのでは？」と感じる方も多いでしょう。 そこで今回は、私たち、ファストコーディングのようなコーディング専門会社に頼まなくても、手軽に導入できるスクロールアニメーションのライブラリを3つご紹介します。HTMLにク... --- ### ＜大公開＞コーディング代行会社のメリットデメリット、上手な使い方とは - Published: 2024-08-21 - Modified: 2024-09-03 - URL: https://fastcoding.jp/blog/all/info/codingmerit/ - カテゴリー: Web業界の動向・情報, ディレクション, フロントエンド - タグ: Web業界の動向, ディレクション, フロントエンド @media screen and (min-width:720px) {p. minheight {min-height: 250px;}} @media screen and (max-width:530px) {. wp-block-image figure {float: none ! important; text-align: center; width: 100%; margin: 0. 5em auto ! important;}} コーディング代行専業として、かれこれもう10年... --- ### 【第４章】「コーディング代行サービスに関するよくある質問」についてまとめて回答します！ - Published: 2024-08-20 - Modified: 2024-09-16 - URL: https://fastcoding.jp/blog/all/info/beginner-series04/ - カテゴリー: Web業界の動向・情報, ディレクション, フロントエンド - タグ: Web業界の動向, ディレクション, フロントエンド コーディング代行会社がお届けする「初めてのコーディング代行」シリーズ！全4章、最終章です！ 「聞いたことはあるけど、使ったことはない」「どんなことしてくれるのかわからない」「メリットがあるのか」など、使ってみないとわからないことも多いこの代行サービスを、今回はシリーズ化して詳しく解説しています。 前回は、HTMLコーディング代行サービスの選び方についてお話させていただきました。 今回は最終章ですので、みなさまがお持ちであろう「コーディング代行サービス」に対してのよくある質問について、まとめて回答... --- ### 【2024年8月調査結果】推奨ブレイクポイントとWebサイト横幅とファーストビュー - Published: 2024-08-05 - Modified: 2024-09-02 - URL: https://fastcoding.jp/blog/all/info/designwidth-202408/ - カテゴリー: Webデザイン, Web業界の動向・情報, ディレクション, フロントエンド - タグ: Webサイト横幅サイズ, コンテンツ幅, ファーストビュー, ブレイクポイント, 推奨フォントサイズ こんにちは。FASTCODINGデザイナーの七転び八重子です。 定期開催のこちらのテーマ、昨年の12月からどう変化があったのか、早速チェックしていきます。 今回は、ブレイクポイントも合わせて確認します。 参考サイト ： statcounter   ブレイクポイントについて レスポンシブデザインでWeb制作をする際、 パソコン・タブレット・スマホといったデバイスの画面サイズに合わせて、ユーザーが見やすいようにWebサイトの表示を変えます。 この表示を切り替えるポイントをブレイクポイントといいます。... --- ### 【第３章】コーディング代行サービスの選び方 - Published: 2024-07-16 - Modified: 2024-10-17 - URL: https://fastcoding.jp/blog/all/info/beginner-series03/ - カテゴリー: Web業界の動向・情報, ディレクション, フロントエンド - タグ: HTML, Web業界の動向, フロントエンド コーディング代行会社がお届けする「初めてのコーディング代行」シリーズ！全4章の第3弾です！ 「聞いたことはあるけど、使ったことはない」「どんなことしてくれるのかわからない」「メリットがあるのか」など、使ってみないとわからないことも多いこの代行サービスを、今回はシリーズ化して詳しく解説しています。 前回は、HTMLコーディング代行サービスを使っているのはどんな人なのかについてお話させていただきました。 今回は逆に、「コーディング代行サービス」を提供している会社はどんな会社なのかや、コーディング代行... --- ### 【第２章】「コーディング代行サービス」を使うのはどんな人？ - Published: 2024-07-10 - Modified: 2024-10-17 - URL: https://fastcoding.jp/blog/all/info/beginner-series02/ - カテゴリー: Web業界の動向・情報, ディレクション, フロントエンド - タグ: HTML, Web業界の動向, フロントエンド コーディング代行会社がお届けする「初めてのコーディング代行」シリーズ！コーディング代行サービス」を使うのはどんな人か解説します コーディング代行会社がお届けする「初めてのコーディング代行」シリーズ！全4章の第２弾です！ 「聞いたことはあるけど、使ったことはない」「どんなことしてくれるのかわからない」「メリットがあるのか」など、使ってみないとわからないことも多いこの代行サービスを、今回はシリーズ化して詳しく解説しています。 前回は、HTMLコーディング代行サービスとそのメリットについてお話させていただきました。 では、実際にコーディング代行サービスを使っているのはどんな人が多いのでしょうか。 【第２章】「コーディング代行サ... --- ### 【第１章】HTMLコーディング代行サービスとは？ - Published: 2024-07-03 - Modified: 2024-10-17 - URL: https://fastcoding.jp/blog/all/info/beginner-series01/ - カテゴリー: Web業界の動向・情報, ディレクション - タグ: Web業界の動向, ディレクション, フロントエンド ウェブサイト制作に欠かせない「コーディング」ですが、実は代わりに全てやってくれる「代行サービス」があることをご存知でしょうか？ 使ってみないとわからないことも多いこの代行サービスを詳しく解説します！ コーディング代行会社がお届けする「初めてのコーディング代行」シリーズ！全4章です！ ウェブサイト制作に欠かせない「コーディング」ですが、実は代わりに全てやってくれる「代行サービス」があることをご存知でしょうか？ 弊社もその「コーディング代行サービス」を行なっている会社の一つです。 「聞いたことはあるけど、使ったことはない」「どんなことしてくれるのかわからない」「メリットがあるのか」など、使ってみないとわからないことも多いこの代行サービスを、今回はシリーズ化して詳しく解説します！ 【第１章】HTM... --- ### Wordpressのエディタにはどんな違いがある？　～Gutenbergエディタとクラシックエディタの違い～ - Published: 2024-05-18 - Modified: 2024-07-03 - URL: https://fastcoding.jp/blog/all/wordpress/wordpress_01/ - カテゴリー: WordPress Wordpressのエディタには、「グーテンバーグエディタ」と「クラシックエディタ」という2種類があります。今回はその違いについてまとめてみました。 グーテンバーグエディタとは グーテンバーグエディタは、WordPressのコンテンツエディタのことです。WordPressは世界で最も使用されているコンテンツ管理システム（CMS）の一つで、グーテンバーグエディタはその中心的な機能です。 グーテンバーグエディタの特徴は以下の通りです。 ブロックベースのエディタ グーテンバーグは「ブロック」と呼ばれる... --- ### 【YouTube,mp4】 Webサイトトップに動画を利用する時のメリットと注意点 - Published: 2024-01-30 - Modified: 2024-01-10 - URL: https://fastcoding.jp/blog/all/webdesign/movie-on-webpage/ - カテゴリー: Webデザイン, 動画制作 - タグ: mp4, YouTube, 動画, 埋め込み こんにちは。FASTCODINGデザイナーの七転び八重子です。 動画シリーズです。Webサイトのファーストビュー(FV)に動画を利用する場合は注意点があります。 どんな動画を用意すれば良いか参考にしてみて下さい。   ファーストビューに動画を使うメリット 多くの情報を伝える サイトに訪れたユーザーが最初に目にするファーストビューは、商品やサービスの情報を的確に伝える必要があります。 動画を利用すると、サービスのイメージや商品の情報を多く伝えることができます。 ユーザーの滞在時間の増加 動画は人の... --- ### 動画編集ソフト！Adobe After EffectsとPremiere Proどっちを利用するべき？ - Published: 2024-01-26 - Modified: 2024-02-05 - URL: https://fastcoding.jp/blog/all/movie/adobe-after-effects-premiere-pro/ - カテゴリー: 動画制作 - タグ: After Effects, mp4, Premiere Pro, YouTube, 動画, 動画編集ソフト こんにちは。FASTCODINGデザイナーの七転び八重子です。 Adobeの動画編集ソフト、Premiere ProとAfter Effectsは、プロが利用する動画編集ソフトのド定番です。 テンプレートから作れるような初心者向けのソフトでは無く、ある程度の知識と操作方法を勉強する必要がありますが、今YouTubeにアップされている動画のほぼ全てのジャンルは、この２つのソフトで作ることができます。 今回は、この２つのソフトの違いをまとめてみました。   Premiere ProとAfter Ef... --- ### 「Webアクセシビリティ」とは？ デザイン制作に意識すべきこと - Published: 2024-01-23 - Modified: 2024-01-10 - URL: https://fastcoding.jp/blog/all/ui-ux/webaccessibility/ - カテゴリー: UI/UX - タグ: UI/UX, Webアクセシビリティ, 情報設計 こんにちは。FASTCODING UI/UXデザイナー、一富士二鷹三茄子です。 現在はインターネットを通じ、いつでも・誰とでも簡単にコミュニケーションを取ることが出来ます。デジタル技術の進歩により様々な事が出来るようになった今、アクセシビリティの重要性が高まっています。 高齢者や障害を持つ方々も同じ様にWebで提供されるサービスを利用できるようにする為には、コンテンツの作り方や実装方法を工夫する必要がありますが、複数の規格やガイドラインがあり、実際何をすれば良いのか分からない方も多いのではないで... --- ### 【YouTube,mp4】 Webサイトに動画掲載する方法まとめ - Published: 2024-01-18 - Modified: 2024-01-10 - URL: https://fastcoding.jp/blog/all/webdesign/embed-youtube/ - カテゴリー: Webデザイン, ディレクション, 便利サービス, 動画制作 - タグ: mp4, YouTube, 動画, 埋め込み こんにちは。FASTCODINGデザイナーの七転び八重子です。 前回、動画をメインビジュアルに掲載したWebサイトを紹介しました。 今回は、動画を掲載する方法をまとめました。   埋め込み方法は、大きく分けて２つ １）　動画共有サイトにアップロードして、埋め込む方法 ブランティングや商品・サービスの紹介動画をYouTubeにアップすることで、コメントからユーザーからの反応や感想も聞くことができます。 ２）　動画自体をサイトに埋め込む方法 メインビジュアルなどに動画を利用する場合は、動画自体を埋め... --- ### 【2024年版】 目的別に無料で使える 動画編集ソフト４選　 - Published: 2024-01-13 - Modified: 2024-10-31 - URL: https://fastcoding.jp/blog/all/direction/video4/ - カテゴリー: ディレクション, 便利サービス, 動画制作 - タグ: mp4, YouTube, 動画, 動画編集ソフト こんにちは。FASTCODINGデザイナーの七転び八重子です。 Webサイトに掲載する動画やYouTubeにアップする動画のような本格的な動画から、アプリで簡単に作れる動画まで、様々なツールがありますが、 今回は、目的別に無料で使えるソフトをまとめてみました。   Gifvie　ー　ちょう簡単！結婚式や送別会に使える寄せ書きムービー Gifvie こちらはモバイルファーストで作られているので、スマホからも、アクセスできて簡単に寄せ書きムービーを作ることができます。 使い方もとっても簡単で、動画編... --- ### 2024年はWebアクセシビリティが義務化？！今こそ早期対応を！ - Published: 2024-01-11 - Modified: 2024-02-07 - URL: https://fastcoding.jp/blog/all/info/2024-web-accessibility/ - カテゴリー: UI/UX, Web業界の動向・情報, ディレクション - タグ: UI/UX, Webアクセシビリティ, 改正障害者差別解消法 こんにちは。FASTCODING UI/UXデザイナー、一富士二鷹三茄子です。 前回、「Webアクセシビリティ」について触れましたが、2024年4月に施行される「改正障害者差別解消法」により、全事業者に対して「合理的配慮の提供」が義務化されます。これによりどの様な影響があるのか、また義務化される事によって起こりうるリスクや、Webアクセシビリティ対応の手順についてもご紹介します。   障害者差別解消法とは？ 障害者差別解消法は、障害者に対する差別を解消し、誰もが安心して暮らせる社会を目指す為の法... --- ### 【UI Design Tool】 Figmaと XDとSketchの分かりやすく比較まとめ - Published: 2024-01-10 - Modified: 2023-12-19 - URL: https://fastcoding.jp/blog/all/info/xd-figma-sketch/ - カテゴリー: UI/UX, Webデザイン, Web業界の動向・情報, ディレクション, フロントエンド - タグ: Adobe XD, Figma, Sketch, 比較 こんにちは。FASTCODINGデザイナーの七転び八重子です。 UIデザインツールと言えば、Figma、Adobe XD、Sketchなどが代表的ですが、2020年頃を境にFigmaユーザーが圧倒的に増えました。 そこで、今回は　3つのデザインツールの特徴や違いを比較してみました。   はじめに 一番、利用されているツールは、Figma ! ! 色々な、比較検討をしても、やはり多くの人に利用されているのは、Figmaです。 コーダーとデータのやり取りをすることも多いので、「デザインデータの共有は... --- ### 【YouTube,mp4】 Webサイトに動画を上手に利用しているサイト - Published: 2023-12-26 - Modified: 2024-07-19 - URL: https://fastcoding.jp/blog/all/info/video1/ - カテゴリー: Webデザイン, Web業界の動向・情報, ディレクション, フロントエンド - タグ: mp4, YouTube, 動画, 埋め込み こんにちは。FASTCODINGデザイナーの七転び八重子です。 Webサイトに、動画を掲載しているサイトがとても増えましたね。 場面が次々と切り替わり、ユーザーの注意をひき、短い時間で多くの情報を伝えることができます。 多くの企業が取り入れているので、今回は上手に動画を活用しているサイトをご紹介したいと思います。   動画掲載のメリット ・ダイナミックな動きでユーザーが注目する！ ・短時間で、多くの情報を伝えることができる！ ・ブランディングに向いている 上手に動画を利用しているサイト 子どもた... --- ### 【2023年12月】推奨Webサイト横幅サイズとファーストビュー結果 - Published: 2023-12-20 - Modified: 2023-12-19 - URL: https://fastcoding.jp/blog/all/info/designwidth-2023-12/ - カテゴリー: UI/UX, Webデザイン, Web業界の動向・情報, ディレクション, フロントエンド - タグ: Webサイト横幅サイズ, コンテンツ幅, 推奨フォントサイズ こんにちは。FASTCODINGデザイナーの七転び八重子です。 半年ごとの恒例テーマ、2023年も残り１ヶ月となってきたので、早速「Webサイトのベストな横幅サイズ（コンテンツ幅）」をチェックしていきます。 参考サイト ： statcounter   はじめに Webサイトの設計やデザインする場合は、最初にWebサイトの幅(コンテンツ幅)を決めます。 パソコンの画面の場合は、「Webサイトの幅」を決めたら、それより400pxくらいは余裕をとって「アートボード」を設定するとデザインし易いです。 ま... --- ### 「フレーミング効果」を利用して売り上げアップ！ UI/UXデザインに使える具体例をご紹介。 - Published: 2023-12-01 - Modified: 2023-11-28 - URL: https://fastcoding.jp/blog/all/info/framingeffect/ - カテゴリー: UI/UX, Web業界の動向・情報, ディレクション こんにちは。FASTCODING UI/UXデザイナー、一富士二鷹三茄子です。 フレーミング効果についてご存知でしょうか？心理現象の一つである「フレーミング効果」は、UI・UXにも活用できます。この効果を利用する事でユーザーを誘導し、購買心理を変える事ができます。   フレーミング効果とは？ 「フレーミング効果」とは、同じ内容でも伝え方や表現方法によって、人々の判断や意思決定に影響を与える現象の事です。情報のどこにフレームを当てるかによって意思決定が異なることから「フレーミング効果」と呼ばれます... --- ### マイクロコピーとは？効果的な活用方法をご紹介！ - Published: 2023-11-27 - Modified: 2023-11-15 - URL: https://fastcoding.jp/blog/all/info/microcopy/ - カテゴリー: UI/UX, Web業界の動向・情報, ディレクション, 便利サービス - タグ: UI/UX, UI/UX改善, マイクロコピー こんにちは。FASTCODING UI/UXデザイナー、一富士二鷹三茄子です。 Webサイトを改善して成果を上げるためには数値を把握し、小さな改善を積み重ねていく事が大切ですが、その中でも費用対効果が高く、手間をかけずに成果を上げる方法として「マイクロコピー」を活用するという方法があります。 今回は、どの様にマイクロコピーを使えば効果的のか、その活用方法について実例と共にご紹介します。 マイクロコピーとは？ マイクロコピーは、Webサイト内のリンクやボタンまわりによく使われる短いテキストの事です... --- ### ファーストビューを改善してCVアップ！ 制作のポイントとは？ - Published: 2023-11-22 - Modified: 2023-11-15 - URL: https://fastcoding.jp/blog/all/info/firstview/ - カテゴリー: UI/UX, Web業界の動向・情報 - タグ: UIUX, キービジュアル, ファーストビュー こんにちは。FASTCODING UI/UXデザイナー、一富士二鷹三茄子です。 ファーストビューはWebサイトの顔であり、企業の強みをアピール出来る重要な部分です。 コンバージョンにも影響する為、状況に応じて最適化する必要がありますが、どの様なデザインにすれば効果的か、悩む方も多いのではないでしょうか？ 今回は、効果的なファーストビューを作るためのポイントについてご紹介します。   ファーストビューの重要性 ファーストビューはWebサイトの印象を左右する重要な部分になります。ユーザーはわずかな時... --- ### キービジュアルやバナー制作で使える！ 印象的な「文字組み」を作るアイディア。 - Published: 2023-11-20 - Modified: 2023-11-15 - URL: https://fastcoding.jp/blog/all/ui-ux/typography/ - カテゴリー: UI/UX - タグ: Webデザイン, タイトルデザイン, バナー制作, 文字組み こんにちは。FASTCODING UI/UXデザイナー、一富士二鷹三茄子です。 バナーやサイトのキービジュアルを制作する際、文字のデザインで悩んでしまう事はありませんか？ キービジュアルの制作においては素材も大切ですが、「文字組み」がしっかり決まるかどうかでバナーやサイトの印象が左右されます。 今回は、印象的な文字組みにする為の基本とアイディアについてご紹介します。 文字組みの基本 イメージに合った書体を選ぶ 文字は書体によってかなり雰囲気が変わる為、書体選びは大切です。 勢いやインパクトを持た... --- ### UXライティングとは？制作の際、気をつけるべきポイントを解説！ - Published: 2023-11-15 - Modified: 2023-11-15 - URL: https://fastcoding.jp/blog/all/direction/uxwriting/ - カテゴリー: UI/UX, ディレクション - タグ: UI/UX, UXライティング こんにちは。FASTCODING UI/UXデザイナー、一富士二鷹三茄子です。 UXデザインはユーザーの一連の体験を設計しますが、その中でも重要となるのが「UXライティング」です。 今回はUXライティングの重要性と、制作する際に気をつけた方が良いポイントについて解説します。   UXライティングとは？ UXライティングとは、プロダクト内で使われるユーザーの行動を促す文言の事で、ストレス無く的確に情報を伝える為のライティング手法です。 具体的には、アクションボタンの文言やエラーメッセージ・注意喚起... --- ### WEBデザインの参考に！ ［2023年］トレンド•デザイン傾向まとめ - Published: 2023-11-01 - Modified: 2024-10-31 - URL: https://fastcoding.jp/blog/all/info/trend/ - カテゴリー: UI/UX, Webデザイン, Web業界の動向・情報 - タグ: UI/UX, Webデザイン, デザイントレンド こんにちは。FASTCODING UI/UXデザイナー、一富士二鷹三茄子です。 気付けば2023年も残りわずかという事で、今年のデザインの傾向について振り返ってみたいと思います。ビジュアル面・レイアウト面・操作感などのインタラクティブ面でそれぞれ分けてご紹介します。   ビジュアル Y2K 「Y2K」(2000年代初頭のスタイル)は音楽・ファッション業界等、様々な分野でリバイバルされ、webデザインにも影響を与えています。 Y2Kはピンク・紫・緑など鮮やかなネオンカラーが特徴で、あえて低画素にし... --- ### 色覚特性に配慮して、誰もが使いやすいUIにする方法 - Published: 2023-09-01 - Modified: 2023-08-29 - URL: https://fastcoding.jp/blog/all/direction/color_vision/ - カテゴリー: UI/UX, ディレクション - タグ: UI/UX, Webデザイン, 色覚 こんにちは。FASTCODING UI/UXデザイナー、一富士二鷹三茄子です。 より多くの人が不自由なくサービスを使えるようにするためには「色覚」に配慮する事が大切ですが、色覚を意識してUI設計できているでしょうか？ 今回は色覚に配慮したUIを作るための方法について解説します。   どのように見えているのか？ 色覚とは？ 色覚とは、色を認識する力です。人は目から入ってくる光によって色を認識しており、目の奥にある網膜の錐体という視細胞で色を感じ取っています。 正常に色を見分ける為には3種類の錐体が... --- ### 【決定版】コーディング代行会社が説明する、コーディング代行の使い方！ - Published: 2023-08-29 - Modified: 2023-08-31 - URL: https://fastcoding.jp/blog/all/info/coding_01/ - カテゴリー: Web業界の動向・情報 こんにちは。FASTCODINGディレクターの働くおかんです。 皆さん、「コーディング代行」ってご存知でしょうか？ 名前は聞いたことがあるけれど、具体的にどんなことしてくれるの？という方もいらっしゃると思います。 この記事では、コーディング代行についての基本的な知識から依頼するにあたっての全体的な流れ、注意事項などを詳しく解説します。適正な価格を把握し、スムーズな依頼をするためのポイントもお伝えします。コーディング代行を上手に活用できれば、プロジェクトのスケジュールを短縮でき、予算も抑えることが... --- ### 【Illustrator-Hack_1】イラストレーターでぷっくりした3Dイラストを作ろう - Published: 2023-07-10 - Modified: 2023-07-03 - URL: https://fastcoding.jp/blog/all/other/illustrator-hack1/ - カテゴリー: Webデザイン, その他 - タグ: 3Dイラスト こんにちは。FASTCODINGデザイナーの七転び八重子です。 イラストレータで簡単に、ぷっくりした3Dイラストを作ってみましょう。 ニューモフィズムなWebサイトにもピッタリなので、デザインの幅が広がります！   ステップ１　イラストを描く イラストレーターで平面のイラストを作成します。 POINT　同じカラーはくっつく！ 同じ色のパーツをグループにして、3D効果をかけると、くっ付きます。 別々に効果をかけたい場合は、別のグループにしておきます。 ステップ２　グループ事に3D効果をかける 同じ... --- ### GoogleマップをWebサイトのデザインに合わせてオシャレにする方法 - Published: 2023-07-03 - Modified: 2024-02-27 - URL: https://fastcoding.jp/blog/all/info/googlemap-custom/ - カテゴリー: Webデザイン, Web業界の動向・情報, ディレクション, フロントエンド - タグ: googlemap, map design, グーグルマップ, デザイン, 地図 こんにちは。FASTCODINGデザイナーの七転び八重子です。 GoogleマップをWebサイトのデザインに合わせてカスタマイズする方法をまとめました。 サイトのカラーとマップのカラーを合わせることで、サイトの統一感が増して、グッと凝ったサイトにみせることができます。   はじめに。Googleマップの埋め込みって無料？有料？ 結論から言いますと、 普通のコーポレートサイトなどであれば、無料で利用できます! (2023年6月現在) iframe埋め込みの場合は完全無料 Googleマップの → ... --- ### WEBサイトの色はどうやって決める？ 抑えるべき配色の基本ルールについてご紹介。 - Published: 2023-06-07 - Modified: 2023-05-26 - URL: https://fastcoding.jp/blog/all/direction/color/ - カテゴリー: UI/UX, ディレクション - タグ: UI/UX, Webデザイン, 配色 こんにちは。FASTCODING UI/UXデザイナー、一富士二鷹三茄子です。 webサイトを制作する上で「色」はサイトの印象を決める重要な要素となります。失敗すると見難いサイトになってしまったり、ブランドイメージにも影響する為、配色については悩むことも多いのではないでしょうか。今回は、webサイトのデザインをする上での配色ルールや、コツについてご紹介します。   サイトを構成する3つのカラー メインカラー サイトの印象を決める色になります。一番主張したい色をメインカラーに設定します。 一般的に... --- ### 縦に長くなってしまうスマホページの情報設計はどうする？ 最適化して見やすいページにする方法 - Published: 2023-06-02 - Modified: 2023-05-26 - URL: https://fastcoding.jp/blog/all/webdesign/smartphonedesign/ - カテゴリー: UI/UX, Webデザイン, ディレクション - タグ: UI/UX, ディレクション, デザイン こんにちは。FASTCODING UI/UXデザイナー、一富士二鷹三茄子です。 現在WEBサイトはレスポンシブで制作されることがほとんどですが、その場合スマホサイトが縦に長くなりすぎてしまうという問題があります。 スマホはPCに比べて表示領域が狭いため、ある程度長くなってしまうのは仕方ないのですが、長くなり過ぎるとデメリットもあるので、制作の際は注意しましょう。   縦に長いことで起こる問題 下部のコンテンツが見られにくい 情報量が多くページが縦に長いと、単純にスクロールする手間が発生します。長... --- ### 【2023年5月】Webサイト横幅サイズとファーストビューとフォントサイズ - Published: 2023-05-09 - Modified: 2023-06-07 - URL: https://fastcoding.jp/blog/all/info/designwidth-2023-5/ - カテゴリー: UI/UX, Webデザイン, Web業界の動向・情報, ディレクション, フロントエンド - タグ: アダプティブ, リキッド, リキッドレイアウト, レスポンシブWebデザイン, レスポンシブレイアウト, 固定幅 こんにちは。FASTCODINGデザイナーの七転び八重子です。 半年ごとの恒例テーマ「Webサイトのベストな横幅サイズ（コンテンツ幅）」 とかいいながら、一年ぶりの更新になってしまいました。。 今回は、フォントサイズも合わせて調べてみました。   はじめに2023年5月時点のディスプレイ解像度を確認していきます 海外向けのサイトの需要が増えている点を踏まえ、今回は、日本に限定せず、世界統計で見ることにします。 PC 昨年と比べて、主要サイズは変わっていませんが、PC全体が減少しています。PCから... --- ### UI改善って何をすればいいの？ 改善のポイント、改善例をご紹介！ - Published: 2022-12-15 - Modified: 2022-12-15 - URL: https://fastcoding.jp/blog/all/info/improvement/ - カテゴリー: UI/UX, Webデザイン, Web業界の動向・情報, ディレクション - タグ: UI/UX, UI改善, Webデザイン, 初心者 こんにちは。FASTCODING UI/UXデザイナー、一富士二鷹三茄子です。 webサービスやアプリのコンバージョンを向上させる上で、UIデザインは非常に重要な役割を果たしています。分かりやすく使いやすいサイトを目指す上では、UIを見直し改善していく事が大切ですが、どこから改善すれば良いのか分からないというような場合も多いのではないでしょうか。 今回は、まず見直すべきUIと改善例について解説します。   選択肢を減らしてみる 迷いは離脱のもと？ 選択肢が多い場合、考えて操作する必要が出てくるた... --- ### CVがアップする、LPのストーリー構成について - Published: 2022-12-05 - Modified: 2022-11-29 - URL: https://fastcoding.jp/blog/all/direction/lp/ - カテゴリー: UI/UX, ディレクション - タグ: LP, UI/UX, Webデザイン こんにちは。FASTCODING UI/UXデザイナー、一富士二鷹三茄子です。 LPのストーリー構成を考えようと思った時、何か正しいのか、またどのように構成すればユーザーの興味を引けるのか、悩んでしまうことはありませんか？ LPは情報量が多くなる為、ただ情報を並べただけでは結局何が言いたいのか分からないページになってしまいがちです。 今回は、CVを高める為の基本的なストーリー構成とテクニックについて解説します。   まず抑えておくべきポイント ペルソナを設定する LPの構成の前に、まずはペルソナ... --- ### レスポンシブデザインとリキッドデザインの違いを明確にしよう！ - Published: 2022-11-14 - Modified: 2024-07-10 - URL: https://fastcoding.jp/blog/all/webdesign/responsive-liquid/ - カテゴリー: Webデザイン, ディレクション, フロントエンド - タグ: アダプティブ, リキッド, リキッドレイアウト, レスポンシブWebデザイン, レスポンシブレイアウト, 固定幅 こんにちは。FASTCODING Webデザイナー、七転び八重子です。 レスポンシブレイアウトとリキッドレイアウト、どちらもデバイス事にサイトを最適化する手法なのですが、改めてその違いを明確に理解しましょう。 以前の記事で「レスポンシブ？リキッド？フレキシブル？レイアウトのまとめ」でレイアウト手法をまとめています。 今回は、「レスポンシブレイアウト」と「リキッドレイアウト」の違いにフォーカスします。   はじめに：FASTCODING流の区分け どちらも色々な定義が世の中にはあり、どれも大きな差... --- ### 2022年のUI/UXデザイントレンド、 スクロールテリングとは？ - Published: 2022-10-16 - Modified: 2022-10-18 - URL: https://fastcoding.jp/blog/all/direction/scrolltelling/ - カテゴリー: UI/UX, ディレクション - タグ: UI/UX, スクロールテリング, デザイントレンド こんにちは。FASTCODING UI/UXデザイナー、一富士二鷹三茄子です。 気付けば2022年も残り3ヶ月になりましたね。残り数ヶ月という事で、今年のデザイン傾向について振り返ってみたいと思います。 ビジュアル的には3Dの様な立体感のあるものやニューモフィズムを意識したもの、また引き続きミニマルなデザインが多く見られましたが、中でも「スクロールテリング」の手法を使ったサイトを多く見かけました。   スクロールテリングとは？ 「スクロールテリング」に違い言葉で「ストーリーテリング」があります。... --- ### GA4 のレポート画面の見方【1】 - Published: 2022-08-02 - Modified: 2022-07-25 - URL: https://fastcoding.jp/blog/all/info/ga4-3/ - カテゴリー: Web業界の動向・情報, 便利サービス - タグ: GA4, UA, グーグルアナリティクス４, ユニバーサルアナリティクス こんにちは。FASTCODING Webデザイナー、七転び八重子です。 前回、UAからGA4の移行方法を簡単にまとめたので、今回は、レポート画面の見方をまとめます。 ※ GA4は、2020年10月のリリースから、次々と機能を追加したりレポート画面のレイアウトを変更しているので、2022年7月時点での情報となります。 ユニバーサル アナリティクス（旧）とGoogleアナリティクス4（新）の違い ユニバーサル アナリティクス（旧）からGoogleアナリティクス4（新）への移行手順   ホーム 下記の... --- ### ユニバーサル アナリティクス（旧）からGoogleアナリティクス4（新）への移行手順 - Published: 2022-07-26 - Modified: 2022-07-19 - URL: https://fastcoding.jp/blog/all/info/ga4-2/ - カテゴリー: Web業界の動向・情報, 便利サービス - タグ: GA4, UA, アナリティクス移行, グーグルアナリティクス４, ユニバーサルアナリティクス こんにちは。FASTCODING Webデザイナー、七転び八重子です。 グーグルは、GoogleアナリティクスのUA（ユニバーサル アナリティクス）サポートを2023年7月1日をもって終了することを発表しました。したがって、7月1日以降はデータの取得ができなくなりますので、後継であるGoogleアナリティクス4か他の解析ツールの導入が必要です。今回は、UAからGA4の移行方法を簡単にまとめてみました。 ユニバーサル アナリティクス（旧）とGoogleアナリティクス4（新）の違い   ① 新しいG... --- ### ユニバーサル アナリティクス（旧）とGoogleアナリティクス4（新）の違い - Published: 2022-07-19 - Modified: 2022-07-19 - URL: https://fastcoding.jp/blog/all/info/ga4-1/ - カテゴリー: Web業界の動向・情報, 便利サービス - タグ: GA4, UA, アナリティクス移行, グーグルアナリティクス４, ユニバーサルアナリティクス こんにちは。FASTCODING Webデザイナー、七転び八重子です。 グーグルは、GoogleアナリティクスのUA（ユニバーサル アナリティクス）サポートを2023年7月1日をもって終了することを発表しました。したがって、7月1日以降はデータの取得ができなくなりますので、後継であるGoogleアナリティクス4か他の解析ツールの導入が必要です。今回は、これまで利用してきたユニバーサルアナリティクスとGoogleアナリティクス4の違いを簡単にまとめてみました、   UAとGA4の違い UAとGA4... --- ### Facebook、Twitter、Instagram、OGP画像の適切サイズ - Published: 2022-07-06 - Modified: 2022-06-23 - URL: https://fastcoding.jp/blog/all/info/ogp-img/ - カテゴリー: Web業界の動向・情報, 便利サービス - タグ: Webサイトビルダー, Wix, ペライチ こんにちは。FASTCODING Webデザイナー、七転び八重子です。 新製品やサービス、キャンペーンなどの情報をWebサイトとSNSでリリースする事が多いと思いますが、その際の OGPの設定 はとても大切です。 今回は、OGRの設定とSNSごとに違うOGR画像のサイズをまとめてみました。   OGRって何？ OGPとは、「Open Graph Protcol」の略で、WebページがSNSでシェアされた際にタイムラインなどに表示されるサムネイル画像、ページタイトル、説明文のことです。 OGPの設... --- ### レスポンシブ？リキッド？フレキシブル？レイアウトのまとめ - Published: 2022-07-01 - Modified: 2022-06-23 - URL: https://fastcoding.jp/blog/all/info/liquid-design/ - カテゴリー: Webデザイン, Web業界の動向・情報, 便利サービス - タグ: グリットレイアウト, フレキシブルレイアウト, リキッドレイアウト, レスポンシブWebデザイン, レスポンシブレイアウト こんにちは。FASTCODING Webデザイナー、七転び八重子です。 Webサイト制作におけるレイアウトの手法、リキッド、フレキシブル、レスポンシブ、グリット、、、、用語がごっちゃになっていませんか？ 改めて、その違いをまとめてみました。   レスポンシブWebデザイン 「レスポンシブWebデザイン」とは、Webサイトを閲覧するユーザーが利用しているデバイス（パソコン・スマホ・タブレットなど）の画面サイズに合わせて、デザインを柔軟に調整し、見やすく最適な表示にすることを指します。 レスポンシブ... --- ### 【2022】 目的別のおすすめWebサイトビルダー5選！ - Published: 2022-06-28 - Modified: 2024-07-08 - URL: https://fastcoding.jp/blog/all/info/website-builders2/ - カテゴリー: Webデザイン, Web業界の動向・情報, 便利サービス - タグ: Webサイトビルダー, Wix, ペライチ こんにちは。FASTCODING Webデザイナー、なな転び八重子です。 前回、Webサイトビルダーを選ぶ上で押さえておきたいポイントをまとめましたが、今回は目的別のおすすめビルダーをご紹介します。海外のツールについては、top10. comからスコアの高いビルダーツールを選びました。 おすすめWebサイトビルダー 個人から小規模法人サイトなら「Wix(ウィックス)」 ワンページWebサイトなら「ペライチ」 チャットボットと連携可能な「STUDIO(スタジオ)」 オンラインストアが開設なら「Sh... --- ### DIY! Webサイトビルダー選びのポイント - Published: 2022-06-24 - Modified: 2022-06-23 - URL: https://fastcoding.jp/blog/all/info/website-builders1/ - カテゴリー: Webデザイン, Web業界の動向・情報, フロントエンド, 便利サービス - タグ: Webサイトビルダー, Wix, ペライチ こんにちは。FASTCODING Webデザイナー、なな転び八重子です。 クラウド型のCMSサービスのWebサイトビルダーは、ドラッグ&ドロップで簡単にWebサイトが作れる便利なツールです。海外で有名なWix（ウィックス）、日本企業発のペライチなど、いろんなツールがあり、どれを選んだら良いのか迷われる方も多いのではないでしょうか？今回は、選ぶ上で押さえておきたいポイントをまとめました。   【はじめに】 Webサイトビルダーを使用する５つのメリット ・専門知識が不要 ・無料で利用できる ・試した... --- ### 定番だけど、使い方に注意が必要なUIコンポーネントとは？ - Published: 2022-03-25 - Modified: 2022-03-22 - URL: https://fastcoding.jp/blog/all/direction/component/ - カテゴリー: UI/UX, ディレクション - タグ: UI/UX, コンポーネント こんにちは。FASTCODING UI/UXデザイナー、一富士二鷹三茄子です。 定番としてよく使われているUIであったとしても、使い方を間違えるとユーザーにとって使いにくくストレスとなってしまう場合があります。特にスマートフォンはPCに比べ領域が小さくなる為、UIデザインする際は気を付けなければなりません。 今回は、定番としてよく使われているものの、使い方に注意が必要なUIコンポーネントと、その改善方法についてご紹介します。   アコーディオン FAQなどで使われる事が多い折り畳み式のアコーディ... --- ### 行動喚起を最大化させるには？ 緊急性を高めたCTAでコンバージョンをアップさせる方法 - Published: 2022-03-23 - Modified: 2022-03-14 - URL: https://fastcoding.jp/blog/all/webdesign/cta/ - カテゴリー: UI/UX, Webデザイン, ディレクション - タグ: CTA, CVR, UI/UX こんにちは。FASTCODING UI/UXデザイナー、一富士二鷹三茄子です。 コロナ禍でネットショッピングをする機会が増えた方も多いと思いますが、「今だけ送料無料！」「数量限定！」などと書かれているのを見て、思わず買い物カゴに入れた経験はないでしょうか。 この様な緊急性を高めたCTAは、コンバージョンに繋がりやすくなります。 サイトへの流入はあるものの、なかなかコンバージョンに繋がらない... という場合、CTAを見直した方が良いかもしれません。 今回は、緊急性を高めたCTAを作るポイントにつ... --- ### 目を引くアイキャッチを作る方法 - Published: 2022-03-16 - Modified: 2022-03-14 - URL: https://fastcoding.jp/blog/all/webdesign/eyecatch/ - カテゴリー: UI/UX, Webデザイン, ディレクション - タグ: UI/UX, アイキャッチ こんにちは。FASTCODING UI/UXデザイナー、一富士二鷹三茄子です。 webサイトを開いた時、一番に目に入るアイキャッチ。どんなコンテンツなのか、ユーザーに興味を持ってもらいサイトへ誘導することが目的ですが、何かが足りない・しっくりこない... などお悩みではないでしょうか？ 目を引くアイキャッチを作るには、ちょっとしたコツが必要です。 今回は覚えておけば応用できる「目を引くアイキャッチ」の作り方についてご紹介します。   コントラストが重要！ 目を引くアイキャッチを作る為に大切なのは... --- ### 【ページスピード対策】画像処理による改善策 - Published: 2022-03-02 - Modified: 2022-03-14 - URL: https://fastcoding.jp/blog/all/frontend/%e3%83%9a%e3%83%bc%e3%82%b8%e3%82%b9%e3%83%94%e3%83%bc%e3%83%89%e5%af%be%e7%ad%96_%e7%94%bb%e5%83%8f%e5%87%a6%e7%90%86/ - カテゴリー: SEO, フロントエンド - タグ: PSI, ページスピード 皆さん、こんにちは！ ファストコーディングベトナムのフロントエンド開発チームのNathanです。 前回は遅延読み込みを活用したページスピードスコアの向上について記述いたしました。 今回は画像処理によるページスピードスコアの向上について書いてみたいと思います。 画像処理だけですので、HTMLやJavaScriptを使うことが無く、とても単純なこと（だから効果があるの？）と思うかもしれませんが、実際弊社で対策をするWebサイトのほとんどは、この対策で数十点のスコアアップができています。 この記事では... --- ### 【ページスピード対策】Lazy loading（遅延読み込み）による改善策 - Published: 2022-02-23 - Modified: 2022-03-14 - URL: https://fastcoding.jp/blog/all/frontend/%e3%83%9a%e3%83%bc%e3%82%b8%e3%82%b9%e3%83%94%e3%83%bc%e3%83%89%e5%af%be%e7%ad%96_lazy-loading_%e9%81%85%e5%bb%b6%e8%aa%ad%e3%81%bf%e8%be%bc%e3%81%bf/ - カテゴリー: SEO, フロントエンド - タグ: PSI, ページスピード 皆さん、こんにちは！ ファストコーディングベトナムの フロントエンド開発のNathanです。 Webサイトへの訪問者数を増やし、Webサイトのパフォーマンスを向上させるために、遅延読み込みを使用してPSIスコアを向上させる方法をご案内します。   遅延読み込みとは PSIスコア、Webサイトのパフォーマンスを向上させるためには多くの方法がありますが、最も一般的に使用される方法の1つは「レイジーロード（lazy loading 遅延読み込み）」です。ユーザの体感速度を上げるために、要素に応じて読み... --- ### 新しいUIデザインのトレンド「クレイモーフィズム」 - Published: 2022-02-23 - Modified: 2022-02-21 - URL: https://fastcoding.jp/blog/all/info/claymorphism/ - カテゴリー: Webデザイン, Web業界の動向・情報 - タグ: claymorphism, クレイモーフィズム, デザイントレンド こんにちは。FASTCODINGデザイナーの七転び八重子です。 2022年の新しいUIデザインのトレンドである「クレイモーフィズム」をまとめてみました。 これまでのデザイントレンドはこちらをご覧ください。 「デザイントレンドを振り返ろう」 クレイモーフィズムとは？ クレイモーフィズムは、クレイ（粘土）のようなマットな質感に、膨らんだ丸みのある3D要素を特徴としたデザインです。 最近のメタバースやNFTの人気が背景にあるようです。 ニューモフィズムとクレイモーフィズムの違い どちらも内側と外側にシ... --- ### 【2022年第1四半期】Webサイト横幅サイズとファーストビュー - Published: 2022-02-21 - Modified: 2022-04-04 - URL: https://fastcoding.jp/blog/all/info/designwidth-2022-2/ - カテゴリー: Webデザイン, Web業界の動向・情報, ディレクション - タグ: 2022年, アートボードサイズ, コンテンツ幅, ファーストビュー, 横幅トレンド こんにちは。FASTCODINGデザイナーの七転び八重子です。 はい。また、このテーマを扱う季節になりました。笑 半年ごとに、Webサイトのベストな横幅サイズ（コンテンツ幅）を調べている私です。今回は、ブラウザのサイズ状況と合わせて、国内のメディアサイト・コーポレートサイトを調べてみました。 半年前の記事はこちらをご覧ください。 「【2021年下半期】Webデザイナー必読！横幅サイズとファーストビューサイズ」 2022年2月時点のディスプレイ解像度を確認 こちらは、半年で大きな変化はないかと思い... --- ### デザイントレンドを振り返ろう - Published: 2022-02-08 - Modified: 2022-02-08 - URL: https://fastcoding.jp/blog/all/webdesign/design-trends/ - カテゴリー: Webデザイン - タグ: クレイモーフィズム, スキューモーフィズム, ニューモーフィズム, フラットデザイン2.0, マテリアルデザイン こんにちは。FASTCODINGデザイナーの七転び八重子です。 今回は、2022年に流行るデザイントレンド「クレイモーフィズム」ついてまとめる前に、 これまでのデザイントレンドをざっとおさらいしてみます。 デザイントレンドを振り返ろう ほぼ毎年、新しいデザイントレンドが生まれているわけですが、その背景には、ビッグ・テックが生み出した商品やサービスの流れや、世界的なモバイルの普及のように、人々の生活に大きな影響を与えた社会的な変化などがあります。デザイントレンドは大きな支流があるものの、過去の流行... --- ### 次世代画像フォーマット「WebP」に対応する方法 - Published: 2022-01-05 - Modified: 2021-12-29 - URL: https://fastcoding.jp/blog/all/webdesign/website-images-webp/ - カテゴリー: Webデザイン - タグ: WebP, 次世代フォーマット画像 こんにちは。FASTCODINGデザイナーの七転び八重子です。 page speed insights（ページスピードインサイト）でページ速度の判定をすると、対策の１つに「次世代フォーマットでの画像の配信」という項目があります。 今回は、次世代フォーマットでの画像「WebP」の特徴や作成方法についてまとめてみたいと思います。 JPAGやGIFなど様々な画像形式をまとめているので合わせてご覧ください。 目次 WebP（ウェッピー）とは？ 他の画像形式とWebPの比較 WebP対応ブラウザ WebP... --- ### Webサイトに最適な画像形式は何？ - Published: 2021-12-28 - Modified: 2021-12-29 - URL: https://fastcoding.jp/blog/all/webdesign/website-images/ - カテゴリー: Webデザイン - タグ: GIF, JPEG, PNG, SVG, WebP, 次世代フォーマット画像 こんにちは。FASTCODINGデザイナーの七転び八重子です。 Webサイトで利用する画像といっても、GIF、JPEG、PNG、SVG、TIFF、BMPなど様々な画像形式があります。最近では、次世代画像フォーマット「WebP」などが新しく登場していますね。 今回は、それぞれの画像の特徴と目的に応じた使い方をまとめました。Webサイトで利用する場合の使い分けもまとめているので参考にしてみてください。 目次 画像形式と特徴一覧 Webサイトで利用する場合 まとめ 画像形式と特徴一覧 画像形式と拡張子... --- ### 視線誘導とは？視線の法則をUIデザインに活用しよう - Published: 2021-12-16 - Modified: 2021-12-13 - URL: https://fastcoding.jp/blog/all/direction/gaze/ - カテゴリー: UI/UX, ディレクション - タグ: UIUX, 視線誘導 こんにちは。FASTCODING UI/UXデザイナー、一富士二鷹三茄子です。 「視線誘導」をご存知でしょうか？ 情報設計する上では、ユーザーに情報が正しく伝わる事、またユーザーがストレスなくその情報をキャッチできる構成になっているかがが重要ですが、その情報を効果的に伝える手法の1つとして「視線誘導」があります。 視線誘導とは？ 「視線誘導」とは、ユーザーの視線の流れをコントロールし誘導するために使われる手法です。 人は視線を動かす時、無意識に動かすパターンがいくつか存在します。 そのパターンを... --- ### 【保存版】イラストレーターで簡単にできるタイトル文字デザイン - Published: 2021-12-13 - Modified: 2021-12-21 - URL: https://fastcoding.jp/blog/all/webdesign/illustrator1/ - カテゴリー: Webデザイン - タグ: Illustrator, イラレ, タイトルデザイン こんにちは。FASTCODINGデザイナーの七転び八重子です。 今回は、イラストレーターで「サクっと」作れてしまう、タイトルデザインをまとめました。 ちょっとしたフォントのあしらいでグッと雰囲気が出るので、ぜひ活用してみてください。 タイトルデザイン一覧 基本　01〜06 どれも簡単なあしらいでーす。 →→いろんな形状が、上記以外にもあるので試してみてください。 フチ系　07〜12 １１と１２で利用しているブレンド機能は、本当に便利で使用頻度が高い機能ですが、 文字デザインでも、インパクトのある... --- ### 少しの気遣いで離脱を防ぐ！ 使い心地を良くするUIテクニック - Published: 2021-11-08 - Modified: 2021-11-08 - URL: https://fastcoding.jp/blog/all/direction/ui-tips/ - カテゴリー: UI/UX, ディレクション - タグ: UIUX, UI改善, インタラクションコスト こんにちは。FASTCODING UI/UXデザイナー、一富士二鷹三茄子です。 普段何気なく使っていると気づきにくいですが、なぜか使いやすいと感じるサービスは「痒いところに手が届く」と感じる細かい配慮がされています。今回は、使い心地を良くする為に取り入れた方が良いTipsをご紹介します。   待ち時間によってステータスを変える クリックして読み込みに時間に時間がかかる時、「読み込み中」と表示しているサービスは多く見かけます。読み込み時間があまりにも長すぎる場合に「読み込み中」のテキストのみだと、... --- ### オブジェクト指向UI（OOUI）とは？ 設計手法とメリットについて - Published: 2021-10-25 - Modified: 2021-10-25 - URL: https://fastcoding.jp/blog/all/direction/ooui/ - カテゴリー: UI/UX, ディレクション こんにちは。FASTCODING UI/UXデザイナー、一富士二鷹三茄子です。 UIの設計手法、OOUI（オブジェクト指向UI）」をご存知でしょうか？ 「使いやすさ」はUI設計の仕方で大きく変わりますが、OOUIは有効な手法であるとされています。 今回はそんな「OOUI」について解説します。   「OOUI」オブジェクト指向UIとは？ 「UIデザイン」というと、一般的には色合いやタイポグラフィなどビジュアル面を整える事と捉えられがちですが、UX5段階モデルで言うところの構造〜表層までを指し、OO... --- ### ワイヤーフレーム制作前に必要となる「情報設計」とは？ 進め方とポイント - Published: 2021-10-21 - Modified: 2021-10-20 - URL: https://fastcoding.jp/blog/all/direction/ia/ - カテゴリー: UI/UX, ディレクション - タグ: UIUX, ワイヤーフレーム, 情報設計 こんにちは。FASTCODING UI/UXデザイナー、一富士二鷹三茄子です。 快適に利用できるサービスを作る為には「情報設計」が重要です。 きちんと情報設計を行うことで、ターゲットユーザーに合わせた導線が明確となり、使いやすいサイトを作ることが出来るようになります。今回は、イマイチ分かりにくい「情報設計」の進め方と、意識すべきポイントについて解説していきたいと思います。   情報設計とは？ 情報設計は、ユーザーに情報が分かり易く伝わる様、整理し組み立てていく事です。 家を建築する場合、どこにリ... --- ### Web制作を外注する際のポイント。 失敗しないために必要な事前準備とは？ - Published: 2021-10-19 - Modified: 2021-10-20 - URL: https://fastcoding.jp/blog/all/webdesign/outsourcing/ - カテゴリー: UI/UX, Webデザイン - タグ: RFP, UIUX, 外注 こんにちは。FASTCODING UI/UXデザイナー、一富士二鷹三茄子です。 「Webサイトをリニューアルしたい」「開業するのでお店のサイトを作りたい」など、Webサイトを外注したいけれど何を準備すればいいのか分からない... といった疑問を持っている方も多いのではないでしょうか。 「サイトが古いので新しくしたい... 」といったご要望は多いのですが、依頼内容がざっくりしすぎていると、思っていたものと違う提案が上がってきたり、修正の追加費用がかかってしまう場合もあります。こんなハズじゃなかった... --- ### 【2021年版】WordPressを高速化するプラグイン３選 - Published: 2021-10-15 - Modified: 2021-10-15 - URL: https://fastcoding.jp/blog/all/info/wp-pagespeed/ - カテゴリー: SEO, Web業界の動向・情報, WordPress - タグ: SEO, WordPess, プラグイン, ページスピード こんにちは。FASTCODINGデザイナーの七転び八重子です。 今回は、WordPressの様々なプラグインの中から、特にページ速度を向上させるプラグイン３つに絞ってご紹介します。 目次 サイト表示速度の重要性 Googleランキングに影響する ユーザーの離脱率を低下させる サイトの速度を確認する WordPressを高速化する必須プラグイン３選 AMP対応 WebP対応 WP Fastest Cache 不要なプラグインを削除する まとめ サイト表示速度の重要性 WordPressは豊富なプラ... --- ### UIデザインするのに適したツールは？おすすめをご紹介！ - Published: 2021-10-04 - Modified: 2021-10-04 - URL: https://fastcoding.jp/blog/all/webdesign/designtools/ - カテゴリー: UI/UX, Webデザイン - タグ: Adobe XD, Figma, Sketch, UI/UX こんにちは。FASTCODING UI/UXデザイナー、一富士二鷹三茄子です。 アプリやWEBサイトの制作に特化したUIデザインツールは、現在様々なものが開発されています。 これからUIデザインツールを試す方にとっては、種類も多い為何を使えば良いか迷うことも多いのではないでしょうか。 今回はおすすめのツールを3点に絞り、それぞれのツールの特徴をご紹介したいと思います。   そもそもUIデザインツールとは？他のデザインツールと何が違う？ WEBデザインするためのツールと言えば、ひと昔前まで、Pho... --- ### デザインがしっくりこない原因は何…？ 美しいデザインの法則 - Published: 2021-09-28 - Modified: 2021-09-25 - URL: https://fastcoding.jp/blog/all/webdesign/designtheory/ - カテゴリー: UI/UX, Webデザイン, ディレクション - タグ: UI/UX, Webデザイン こんにちは。FASTCODING UI/UXデザイナー、一富士二鷹三茄子です。 デザインが完成したものの、何となくしっくりこない... 何が原因か分からない... などのお悩みはありませんか？ デザインは、各要素を組み合わせたバランスで成り立っていますが、美しい・洗練されていると感じるデザインには共通するルールがあります。そのルールとは何なのか？今回はデザインがしっくりこない場合、確認すべきポイントをまとめてみました。   画像の選定 まず第一に、写真の選定に気をつけましょう。 写真が美しいサイ... --- ### モーショングラフィックス徹底解説！活用メリットと2021年のトレンド - Published: 2021-09-17 - Modified: 2024-07-24 - URL: https://fastcoding.jp/blog/all/webdesign/motion-graphics/ - カテゴリー: Webデザイン - タグ: Logo Animation, motion graphics, Webデザイン, アニメーション, モーショングラフィックス こんにちは。FASTCODINGデザイナーの七転び八重子です。 近年、YoutubeのOPや、企業ロゴ、Webサイトのキービジュアルなどモーショングラフィックスを利用する事が増えました。 今回は、モーショングラフィックスのメリットや2021年のトレンド、事例をご紹介しようと思います。 目次 モーショングラフィックスとは？ モーショングラフィックスのメリット モーショングラフィックスの2021年トレンド アニメーションロゴ モーフィング グレイン効果 細いライン 2D・3Dのハイブリッド技術 モー... --- ### 【Photshop】ピンボケ写真をくっきり補正する - Published: 2021-09-14 - Modified: 2021-10-05 - URL: https://fastcoding.jp/blog/all/webdesign/photoshop-tips2/ - カテゴリー: Webデザイン - タグ: Photshop, Webデザイン, チュートリアル, ハイパス, ピンボケ, 写真加工, 写真補正 こんにちは。FASTCODINGデザイナーの七転び八重子です。 Webデザインで使用する写真で、昔撮影した写真を利用することって、結構あると思いますが、この写真を利用したい！と思っても、手ブレでピンボケしてる写真とかもありますよね。過去の写真は新しく撮影できないもの、（例えば創業当時の写真だったり）もあります。今回は、そんなピンボケ写真を出来るだけくっきり補正してみたいと思います。 目次 実践！ ピンボケ写真をくっきり補正しよう！ STEP1, 画像を２枚複製する STEP2, スマートシャープ... --- ### 【Core Web Vitals 5 】コアウェブバイタルの具体的な対策まとめ - Published: 2021-09-09 - Modified: 2024-07-08 - URL: https://fastcoding.jp/blog/all/info/corewebvitals-5/ - カテゴリー: SEO, Web業界の動向・情報 - タグ: Core Web Vitals, Google PageSpeed Insights, Google Search Console, グーグルサーチコンソール, コア ウェブ バイタル, ページスピードインサイト こんにちは。FASTCODINGデザイナーの七転び八重子です。 SEO対策の１つ、「コアウェブバイタル（Core Web Vitals）」を5回に分けてまとめています。 第1回目は、「コアウェブバイタルとは？詳しく解説」 第2回目は、「Google Search Console （グーグルサーチコンソール）の基本と登録方法」 第3回目は、「Google Search Console （グーグルサーチコンソール）の使い方」 第4回目は、「Google PageSpeed Insights （ページ... --- ### 【Core Web Vitals 4 】Google PageSpeed Insights （ページスピードインサイト）の使い方 - Published: 2021-09-06 - Modified: 2024-07-08 - URL: https://fastcoding.jp/blog/all/info/corewebvitals-4/ - カテゴリー: SEO, Web業界の動向・情報 - タグ: Core Web Vitals, Google PageSpeed Insights, コア ウェブ バイタル, ページスピードインサイト こんにちは。FASTCODINGデザイナーの七転び八重子です。 SEO対策の１つ、「コアウェブバイタル（Core Web Vitals）」を5回に分けてまとめています。 第1回目は、「コアウェブバイタルとは？詳しく解説」 第2回目は、「Google Search Console （グーグルサーチコンソール）の基本と登録方法」 第3回目は、「Google Search Console （グーグルサーチコンソール）の使い方」 第4回目は、「Google PageSpeed Insights （ページ... --- ### 【Core Web Vitals 3 】Google Search Console （グーグルサーチコンソール）の使い方 - Published: 2021-09-01 - Modified: 2024-07-08 - URL: https://fastcoding.jp/blog/all/info/corewebvitals-3/ - カテゴリー: SEO, Web業界の動向・情報 - タグ: Core Web Vitals, Google Search Console, グーグルサーチコンソール, コア ウェブ バイタル こんにちは。FASTCODINGデザイナーの七転び八重子です。 SEO対策の１つ、「コアウェブバイタル（Core Web Vitals）」を5回に分けてまとめています。 第1回目は、「コアウェブバイタルとは？詳しく解説」 第2回目は、「Google Search Console （グーグルサーチコンソール）の基本と登録方法」 第3回目は、「Google Search Console （グーグルサーチコンソール）の使い方」 第4回目は、「Google PageSpeed Insights （ページ... --- ### 【Core Web Vitals 2 】Google Search Console （グーグルサーチコンソール）の基本と登録方法 - Published: 2021-08-24 - Modified: 2024-07-08 - URL: https://fastcoding.jp/blog/all/info/corewebvitals-2/ - カテゴリー: SEO, Web業界の動向・情報 - タグ: Core Web Vitals, Google Search Console, グーグルサーチコンソール, コア ウェブ バイタル こんにちは。FASTCODINGデザイナーの七転び八重子です。 SEO対策の１つ、「コアウェブバイタル（Core Web Vitals）」を5回に分けてまとめています。 第1回目は、「コアウェブバイタルとは？詳しく解説」 第2回目は、「Google Search Console （グーグルサーチコンソール）の基本と登録方法」 第3回目は、「Google Search Console （グーグルサーチコンソール）の使い方」 第4回目は、「Google PageSpeed Insights （ページ... --- ### 【Core Web Vitals 1 】コアウェブバイタルとは？詳しく解説 - Published: 2021-08-19 - Modified: 2021-12-21 - URL: https://fastcoding.jp/blog/all/info/corewebvitals-1/ - カテゴリー: SEO, Web業界の動向・情報 - タグ: Core Web Vitals, コア ウェブ バイタル こんにちは。FASTCODINGデザイナーの七転び八重子です。 SEO対策の１つ、「コアウェブバイタル（Core Web Vitals）」を5回に分けてまとめます。 第1回目は、「コアウェブバイタルとは？詳しく解説」 第2回目は、「Google Search Console （グーグルサーチコンソール）の基本と登録方法」 第3回目は、「Google Search Console （グーグルサーチコンソール）の使い方」 第4回目は、「Google PageSpeed Insights （ページスピ... --- ### ミニマルデザインの落とし穴！気をつけたいポイント - Published: 2021-08-17 - Modified: 2021-09-25 - URL: https://fastcoding.jp/blog/all/webdesign/minimal/ - カテゴリー: UI/UX, Webデザイン, ディレクション - タグ: フラットデザイン, マテリアルデザイン, ミニマル こんにちは。FASTCODING UI/UXデザイナー、一富士二鷹三茄子です。 前回の記事でミニマルデザインについて説明しましたが、今回はミニマルデザインを採用する際、気をつけた方が良いポイントをまとめてみました。 ミニマルデザインのメリット！ 近年のトレンドであるミニマルデザインは、多くのサイトで採用されています。その理由として、以下のようなメリットがあげられます。 ・マルチデバイスに対応しやすいデザイン ・読み込み時間の高速化 ・不必要な装飾を排除することのより認知負荷の低減につながる ・コ... --- ### 【Photshop】SNSのアイコンに！人物写真をイラスト風に加工する - Published: 2021-07-28 - Modified: 2021-08-28 - URL: https://fastcoding.jp/blog/all/webdesign/photoshop-tips1/ - カテゴリー: Webデザイン - タグ: Photshop, Webデザイン, イラスト, チュートリアル, 写真加工 こんにちは。FASTCODINGデザイナーの七転び八重子です。 Webデザインで使用する写真やSNSのプロフィールアイコンなど、本人顔出しNGの方も、イラストならOK! ってニーズが結構ありませんか？ 今回は、人物写真をポスタリゼーションでイラストチックに加工するチュートリアルをまとめてみました。 ポスタリゼーションとは？ 写真や印刷物などの連続的な階調（グラデーション）をもつ画像を、明暗や色彩に応じて、段階的に分けて表現することです。使用する色数を減らし、アニメ調のイラストのように表現すること... --- ### ミニマルデザインとは？ デザインスタイルの変遷とスタイルの特徴を解説！ - Published: 2021-07-26 - Modified: 2021-07-12 - URL: https://fastcoding.jp/blog/all/direction/designstyle/ - カテゴリー: UI/UX, ディレクション - タグ: UI/UX, フラットデザイン, マテリアルデザイン, ミニマルデザイン こんにちは。FASTCODING UI/UXデザイナー、一富士二鷹三茄子です。 フラットデザインやマテリアルデザインなど、webサイトのビジュアル表現には様々なスタイルがあります。現在はミニマルなデザインが主流となっていますが、今日に至るまでデザインスタイルはどの様に変化していったのか、変遷を追いながら各スタイルの特徴を解説していきたいと思います。   スキューモーフィズム スキューモーフィズムは要素に光と影を入れる事で立体感を持たせ、現実世界の様な3D表現を用いたデザインスタイルになります。立... --- ### 【MEGA CREATOR】Facebook、Instagram、Twitter、YouTube用の画像が簡単に作れちゃう便利サイト - Published: 2021-07-19 - Modified: 2021-07-23 - URL: https://fastcoding.jp/blog/all/webdesign/mage-creator/ - カテゴリー: Webデザイン, 便利サービス - タグ: illustration, maga creator, Webデザイン こんにちは。FASTCODINGデザイナーの七転び八重子です。 Facebook、Instagram、Twitter、YouTube用のカバー画像やポスト画像、自分で作るとカッコよくできなかったり、素材探しに時間取られちゃったりしませんか？ 今日は、そんな画像を簡単に作れちゃう便利なサイト MEGA CREATOR をご紹介しようと思いまーす。 ちなみに、この記事のアイキャッチ画像は、MEGA CREATOR を利用して作ってみました！ 目次 MEGA CREATOR って何？ 実践！ MEGA... --- ### 【2021年下半期】Webデザイナー必読！横幅サイズとファーストビューサイズ - Published: 2021-07-12 - Modified: 2021-07-15 - URL: https://fastcoding.jp/blog/all/info/designwidth-2021-7/ - カテゴリー: UI/UX, Webデザイン, Web業界の動向・情報 - タグ: max-width, Webデザイン, アートボードサイズ こんにちは。FASTCODINGデザイナーの七転び八重子です。 みなさん、Webデザイン時のワイドサイズやファーストビューサイズを何ピクセルに設定してますか？ 私は半年ごとに支流のサイズを確認しているので、２０２１下半期スタートに合わせてまとめてみました。 前回2020年10月にまとめましたが、今回は、デザインのレイアウトも考慮に入れています。 目次 ソリッドレイアウトorリキッドレイアウトorフレキシブルレイアウト？ ソリッドレイアウト（固定レイアウト）とは？ リキッドレイアウト（可変レイアウ... --- ### CVに繋げるUI/UXデザインのポイント（３） - Published: 2021-06-23 - Modified: 2024-07-09 - URL: https://fastcoding.jp/blog/all/direction/cvr3/ - カテゴリー: UI/UX, ディレクション - タグ: CVR改善, UI/UX こんにちは。FASTCODING UI/UXデザイナー、一富士二鷹三茄子です。 今回もCVに繋げるUI/UXデザインのポイントをご紹介します。CVを妨げる要因は色々ありますが、ユーザーにとって初めて訪れたサイトやサービスでは「購入」「登録」などといったアクションは、非常にハードルが高いものです。 人は、その行動によって得られる利益よりも損失の方を意識する傾向があると言われています。ユーザーが損失と感じる不安は取り除き、直感的に利用できる体験を提供することがCVのハードルを取り除く近道となります。... --- ### CVに繋げるUI/UXデザインのポイント（２） - Published: 2021-06-16 - Modified: 2024-07-09 - URL: https://fastcoding.jp/blog/all/direction/cvr2/ - カテゴリー: UI/UX, ディレクション - タグ: CVR改善, UI/UX こんにちは。FASTCODING UI/UXデザイナー、一富士二鷹三茄子です。 前の記事で、CVに繋げるデザインを作るためには、ユーザーの見えない心理を掴み、情報設計することが大切であると説明しましたが、今回はそれををいかにユーザーに分かりやすく、かつ魅力的に映るようデザインに落とし込むかについて説明していきたいと思います。   ユーザー視点で情報をデザインする 日常を意識してデザインしよう ユーザーに分かりやすいビジュアルデザインを考える上で大切なポイントは、ユーザーのに日常を意識する事です。... --- ### CVに繋げるUI/UXデザインのポイント（１） - Published: 2021-06-09 - Modified: 2024-07-09 - URL: https://fastcoding.jp/blog/all/direction/cvr1/ - カテゴリー: UI/UX, ディレクション - タグ: CVR改善, UI/UX こんにちは。FASTCODING UI/UXデザイナー、一富士二鷹三茄子です。 サービスを運営する上では、ユーザーが定着してくれない・CVに至る前にサイトから離脱してしまう... などの問題は良く起こります。これは、サービス提供側とユーザーニーズの「すれ違い」が発生しているのにもかかわらず、それに気が付かないままUIデザインを行なっている事がひとつの要因かもしれません。 では、どうすればCVに繋げられるのか？また、どんな事に気をつけてUIデザインを行うべきかについて、具体例を挙げながら改善策をご... --- ### UIデザインをする上で重要な「インタラクションコスト」とは？ - Published: 2021-06-08 - Modified: 2021-06-08 - URL: https://fastcoding.jp/blog/all/direction/interactioncost/ - カテゴリー: UI/UX, ディレクション - タグ: UI/UX, インタラクションコスト, 認知負荷 こんにちは。FASTCODING UI/UXデザイナー、一富士二鷹三茄子です。 今回は、優れたUIデザインをする上で必要となる「認知負荷」について説明したいと思います。これは「インタラクションコスト」と呼ばれ、ユーザービリティを考慮したUIを設計する上では最も重要となります。   インタラクションコストとは サービスを使う時にユーザーは様々な事を考えつつ、スクロールやスワイプをしながら画面のあちこちを見回し、自分自身の目標を達成しようと試みます。その時にユーザーが受ける負担やエネルギーが少なけれ... --- ### UIデザインをする上でのルール・概念 - Published: 2021-06-04 - Modified: 2021-06-08 - URL: https://fastcoding.jp/blog/all/direction/theory/ - カテゴリー: UI/UX, ディレクション - タグ: UIデザイン, アフォーダンス こんにちは。FASTCODING UI/UXデザイナー、一富士二鷹三茄子です。 世の中にはたくさんのWEBサービスがありますが、みなさんは何が決め手でそのサービスを使ってるでしょうか？サービス内容が良い、見やすい・使いやすいなど様々な理由があると思います。 WEBサービスを使う際、UIはユーザーが最初に触れる部分であり、そのサービスを印象づける上で重要な要素となります。UIとUXの関係性については前の記事で説明しましたが、UIを使った時にユーザーの内面に起こる反応が「UX」となり、UXはユーザー... --- ### 【セキュリティ対策】コンピューターウイルスの種類と対策 - Published: 2021-06-02 - Modified: 2021-05-24 - URL: https://fastcoding.jp/blog/all/info/security-1/ - カテゴリー: Web業界の動向・情報, その他 - タグ: ウイルス, セキュリティ対策 こんにちは。FASTCODINGデザイナーの七転び八重子です。 コンピューターウイルスについて、ざっくり知っている方はお多いと思いますが、まさか自分がウイルスに感染するとは思ってないかもしれません。ウイルスは日々進化しているので感染を100%防ぐことはできませんが、どのような種類のウイルスがあり、どのように対策すべきかを知っておくことが大切です。今回は、コンピューターウイルスについてまとめてみました。 目次 マルウェアとコンピューターウイルス よくある症状 感染経路 マルウェアの種類 ファイル感... --- ### UXをデザインする方法 - Published: 2021-06-01 - Modified: 2021-06-08 - URL: https://fastcoding.jp/blog/all/direction/uxdesign/ - カテゴリー: UI/UX, ディレクション - タグ: UXデザイン, カスタマージャーニーマップ, ストーリーボード, ペルソナ こんにちは。FASTCODING UI/UXデザイナー、一富士二鷹三茄子です。 WEBサイトやサービスを作る上でUXデザインは重要と聞きますが、実際どの様に体験(UX)をデザインするのか分からないという方も多いのではないかと思います。 前の記事で、UI/UXデザインの思考法には、「人間中心設計」や「デザイン思考」などがあると説明しました。大まかな流れはこちらの記事で説明しているのでチェックしてみてください。 設計プロセスを理解したとことで、実際どのような方法でUXデザインは行われているのか、その... --- ### 人間中心設計・デザイン思考とは？ - Published: 2021-05-26 - Modified: 2021-06-08 - URL: https://fastcoding.jp/blog/all/direction/hcd/ - カテゴリー: UI/UX, ディレクション - タグ: UI/UX, デザイン思考, 人間中心設計 こんにちは。FASTCODING UI/UXデザイナー、一富士二鷹三茄子です。 サービスを作る上で、ユーザーにどの様な体験（UX）を提供するかは非常に重要となりますが、その「UX」を高める為にはどの様な手法があるかご存知でしょうか。 UI/UXはユーザーを主軸としてデザインを行いますが、この様に使う人を中心に置き、設計・企画する思考法に「人間中心設計」や「デザイン思考」があります。 また、「人間中心設計」と「デザイン思考」はプロセスがとても似ており、混同しがちです。 今回は「人間中心設計」「デザ... --- ### 「Google Best Things」世界で人気のある商品をゲットしよう！ - Published: 2021-05-24 - Modified: 2025-03-13 - URL: https://fastcoding.jp/blog/all/info/bestthings/ - カテゴリー: Web業界の動向・情報, その他 - タグ: google, Google Best Things, ショッピング こんにちは。FASTCODINGデザイナーの七転び八重子です。 今年の3月、Googleが公開したサイト　「Google Best Things」　 さまざまなジャンルの人気商品を集めたこのサイトを今回はご紹介します。 ※こちらのWebサイトはすでに閉鎖されているようですので、ご注意ください。（2025年3月現在） 目次 人気商品Top1000点 商品の平均価格やレビューが見れる Googleショッピングで購入可能 まとめ 人気商品Top1000点 Google Best Things - Di... --- ### UI/UXはなぜ必要？重要性と改善方法 - Published: 2021-05-19 - Modified: 2021-06-08 - URL: https://fastcoding.jp/blog/all/direction/importance_uiux/ - カテゴリー: UI/UX, ディレクション - タグ: UI/UX改善, Webデザイン こんにちは。FASTCODING UI/UXデザイナー、一富士二鷹三茄子です。 最近よく耳にする「UI/UX」。なぜ今必要とされているのでしょうか？ その前に、UI/UXとは何の事なのか疑問な方はこちらの記事をチェックしてみてください。 UI/UXをデザインするという事は、「使い勝手」と「体験価値」を作ることです。 そうは言っても、実際どのような事をするのか分からない方も多いのではないかと思います。今回は実例を挙げ、UIUXが必要な理由とUI/UXの改善例をご紹介します。   UI/UXの重要性... --- ### ユーザービリティとは - Published: 2021-05-18 - Modified: 2021-06-08 - URL: https://fastcoding.jp/blog/all/direction/usability/ - カテゴリー: UI/UX, ディレクション - タグ: UIUX, ユーザビリティ こんにちは。FASTCODING UI/UXデザイナー、一富士二鷹三茄子です。 様々な商品やサービスを選ぶ上で「使いやすさ」は特に重要視する部分だと思います。 WEBサイトにおいても、選ばれる商品にするには「ユーザービリティ」を高めることが重要です。 この「ユーザービリティ」という言葉は「使いやすさ」と解釈される事が多いですが、それだけの意味ではありません。ボタンやメニューの識別・見易さといったUIに関わる部分になりますが、単純にデザインやUIが良ければよいというものでも無く、総合的な満足度など... --- ### UI/UXとは？それぞれの違いを理解しよう - Published: 2021-05-12 - Modified: 2024-09-16 - URL: https://fastcoding.jp/blog/all/direction/uiux/ - カテゴリー: UI/UX, ディレクション - タグ: UI/UX, WEBサービス, Webデザイン こんにちは。FASTCODING UI/UXデザイナー、一富士二鷹三茄子です。 「UI/UXデザイン」という言葉をよく耳にするようになりましたが、どのような事か正しく理解できているでしょうか？UIとUXはセットで呼ばれる事が多いですが、それぞれは別ものです。しかし、定義は曖昧で両者を混同しているケースもよくあります。 今回は混同しがちな「UIとUX」について、その違いや意味を解説していきます。   UIとは？ UIはユーザーインターフェースの略です。 User Interface 利用者　境界面... --- ### 【gfyCat】10分の1以上圧縮！GifアニメをWebM形式に変換してWebサイトに貼り付ける！ - Published: 2021-05-11 - Modified: 2024-07-31 - URL: https://fastcoding.jp/blog/all/info/gfycat/ - カテゴリー: Webデザイン, Web業界の動向・情報, ディレクション, フロントエンド, 便利サービス - タグ: gifアニメ, Webデザイン, Web業界の動向, アニメーション, 便利サービス ※こちらのサービスは、現在は提供を終了しているようですのでご注意ください。（2024年7月19日更新） こんにちは。FASTCODINGデザイナーの七転び八重子です。 今更ながらですが、ブログやWebサイトnに動画やgifアニメを扱う方って多いのではないでしょうか？ ユーチューブにアップして貼り付けしたりするの手っ取り早い気もしますが、画面キャプチャーのgifアニメなどは、結構重たかったりします。私もブログで、手順を説明するのにGifアニメを作るのですが、重たいのでコマ数を削ったりと工夫していま... --- ### 「cosha」画像と同じ色のシャドウを入れてオシャレにしてみた。 - Published: 2021-05-07 - Modified: 2024-07-20 - URL: https://fastcoding.jp/blog/all/webdesign/cosha/ - カテゴリー: Webデザイン - タグ: cosha, JavaScript, Webデザイン, シャドウ こんにちは。FASTCODINGデザイナーの七転び八重子です。 今回は、写真のカラーに合わせて同じカラーのシャドウを入れてくれるJavaScript「cosha（コーシャ）」をご紹介します。スクリプトは非常に軽量で依存性もありません。ライセンスはMITです。 MITライセンス（MIT License）とは？ オープンソースソフトウェアのライセンスのひとつで、無料で基本は自由につかうことができるのが特徴です。 著作権表示（「Copyright (c) 年 作者名」）と、このライセンスの全文（英語の... --- ### 高速化機能Lazy-loadingをWordPress 5.7のiframeで標準サポート - Published: 2021-04-30 - Modified: 2021-04-23 - URL: https://fastcoding.jp/blog/all/wordpress/wp-news0413/ - カテゴリー: WordPress - タグ: Lazy-load, Web業界の動向, ページスピード こんにちは。FASTCODINGデザイナーの七転び八重子です。 以前、「Lazy Load」でページの読み込み速度を向上させるという記事をまとめたのですが、その「Lazy Load」を、WordPress がバージョン5. 7で標準サポートしました。これまではプラグインで対応していたのでこれは嬉しい追加機能ですね。 （WordPress 5. 7は2021年3月9日にリリース。） 目次 Lazy Load とは？ Lazy loading のブラウザサポート状況 iframe 動画の読み込み速度... --- ### Googleトップニュース掲載の条件からAMPが必要なくなる！？ - Published: 2021-04-27 - Modified: 2024-07-31 - URL: https://fastcoding.jp/blog/all/info/g-news0331/ - カテゴリー: Web業界の動向・情報 - タグ: AMP, Core Web Vitals, Web業界の動向, コア ウェブ バイタル こんにちは。FASTCODINGデザイナーの七転び八重子です。 2021年3月31日、Googleニュース「コアウェブバイタル（Core Web Vitals）とページエクスペリエンスに関するFAQ」が発表されました。 ※この記事は削除されているようです。（2024年7月31日 更新） 2016年から現在まで、トップニュース枠に掲載されるには AMP 対応していることが条件でしたが、今後その必要がなくなるようです。 コアウェブバイタル（Core Web Vitals）って何？？過去記事で詳しく説... --- ### 【第三部】4500人に聞いた！2021年最新のフロントエンド開発レポート（和訳） - Published: 2021-04-22 - Modified: 2021-04-19 - URL: https://fastcoding.jp/blog/all/info/state-of-frontend-2020-3/ - カテゴリー: Webデザイン, Web業界の動向・情報, フロントエンド - タグ: React, Web業界の動向, フレームワーク, フロントエンド, マイクロフロントエンド, 検索エンジン最適化 こんにちは。FASTCODINGデザイナーの七転び八重子です。 ポーランドに拠点を置く、ソフトウェア開発会社のTHE SOFTWARE HOUSEさんが2020年に行った「フロントエンド開発のトレンドのアンケート」結果を和訳、今回は、第三部です。 第一部はこちら 第二部はこちら State of Frontend 2020　（第三部） 8章　開発チームについて ① 昨年、開発チームの一員として働いたことはありますか？ ② これらの人々のうち、あなたのプロジェクト開発チームの一員だったのはどれです... --- ### フォントワークス8書体がGoogle Fontsで利用可能に！ - Published: 2021-04-19 - Modified: 2021-04-19 - URL: https://fastcoding.jp/blog/all/info/fontworks8/ - カテゴリー: Webデザイン, Web業界の動向・情報, フロントエンド - タグ: Webfonts, Web業界の動向, フロントエンド こんにちは。FASTCODINGデザイナーの七転び八重子です。 2021年1月下旬、フォントワークスは、Google社の「Google Fonts」へ手書き風の楷書系硬筆体「クレー」やディスプレイ書体の「ロックンロール」「レゲエ」「ドットゴシック」など全8書体提供を開始しました。が、1月末の段階では、まだGoogle fonts内で反映されていませんでした。すっかり忘れていたのですが、ニュースから一月経って、もう一度確認したところ、6書体が反映されていました。後の3書体はどうしたんだろう。。。 ... --- ### 【2021年4月】現場で使える！テキストエフェクトのまとめ - Published: 2021-04-16 - Modified: 2021-04-06 - URL: https://fastcoding.jp/blog/all/info/202104-text-animation/ - カテゴリー: Webデザイン, Web業界の動向・情報, ディレクション, フロントエンド - タグ: JavaScript, Webデザイン, Web業界の動向, アニメーション こんにちは。FASTCODINGデザイナーの七転び八重子です。 Webサイトで使いたい！カッコよくて、オシャレなテキストエフェクト・アニメーションをまとめてみました。 今回は、codepenから探してみました。 目次 CodePen Home CSS3 text-shadow effects Rotating text Shattering Text Animation SVG text mask Pure CSS Text Reveal ScrollTrigger: SVG Text Mask... --- ### 【第二部】4500人に聞いた！2021年最新のフロントエンド開発レポート（和訳） - Published: 2021-04-14 - Modified: 2021-04-06 - URL: https://fastcoding.jp/blog/all/info/state-of-frontend-2020-2/ - カテゴリー: Webデザイン, Web業界の動向・情報, フロントエンド - タグ: React, Web業界の動向, フレームワーク, フロントエンド, マイクロフロントエンド, 検索エンジン最適化 こんにちは。FASTCODINGデザイナーの七転び八重子です。 ポーランドに拠点を置く、ソフトウェア開発会社のTHE SOFTWARE HOUSEさんが2020年に行った「フロントエンド開発のトレンドのアンケート」結果を和訳、今回は、第二部です。 第一部はこちら State of Frontend 2020　（第二部） 4章　JAMSTACKについて ① JAMSTACK Webサイトを構築しましたか？ ② 昨年、どの静的サイトジェネレーターを使用しましたか？ 5章　マイクロフロントエンドについ... --- ### 【第一部】4500人に聞いた！2021年最新のフロントエンド開発レポート（和訳） - Published: 2021-04-07 - Modified: 2021-04-06 - URL: https://fastcoding.jp/blog/all/info/state-of-frontend-2020-1/ - カテゴリー: Webデザイン, Web業界の動向・情報, フロントエンド - タグ: React, Web業界の動向, フレームワーク, フロントエンド こんにちは。FASTCODINGデザイナーの七転び八重子です。 ポーランドに拠点を置く、ソフトウェア開発会社のTHE SOFTWARE HOUSEさんが2020年に行った「フロントエンド開発のトレンドのアンケート」結果を和訳してみました。今回のレポートには、Web開発のトレンド・人気のあるフレームワークとツール・専門家による考察がまとめれています。フロントエンド開発において、現在の動向を把握するのに役立つはずです。膨大なレポートなので、３部に渡ってご紹介します。 State of Fronten... --- ### フォントのすべて「Webサイトで使えるフォントはコレ！」 - Published: 2021-04-04 - Modified: 2024-07-31 - URL: https://fastcoding.jp/blog/all/info/website-font/ - カテゴリー: SEO, Webデザイン, Web業界の動向・情報, フロントエンド - タグ: Webfonts, Web業界の動向, フォント, フロントエンド こんにちは。FASTCODINGデザイナーの七転び八重子です。 みなさん、Webデザインになんのフォントを使っていますか？ OS標準フォント、市販フォント、Webフォント、がありますが、グラフィックデザインと違ってWebサイトで使える（推奨）フォントは限られています。今回はそんなフォントについて、基礎からしっかりおさらいしてみます。 目次 そもそもフォントって何？ ① OS標準フォント ② 市販フォント ③ Webフォント Webサイトに使う推奨フォントはコレ Webフォントを使うなら！サブセッ... --- ### 【2021年3月】アニメーションが印象に残るサイトのまとめ - Published: 2021-03-22 - Modified: 2024-08-26 - URL: https://fastcoding.jp/blog/all/info/202103-animation-site/ - カテゴリー: Webデザイン, Web業界の動向・情報, ディレクション, フロントエンド - タグ: Webデザイン, Web業界の動向, アニメーション こんにちは。FASTCODINGデザイナーの七転び八重子です。 2021年に国内でリニューアルされたWebサイトの中でアニメーションを取り入れてるサイトを主に、まとめてみました。 商品やサービスのイメージを的確にユーザーに伝えるには、言葉や画像では、なかなか伝わり難い事が多々あります。アニメーションを取り入れる事で、商品のストーリーやイメージを解り易く目に見える形にすることができ、商品理解を促進することができます。 目次 国内のアニメーションサイト SmartHRの企業サイト North Gra... --- ### 【CSS】CSSだけで画像をトリミングできる「object-fit」 - Published: 2021-03-08 - Modified: 2021-04-06 - URL: https://fastcoding.jp/blog/all/info/object-fit/ - カテゴリー: Webデザイン, Web業界の動向・情報, ディレクション, フロントエンド - タグ: CSS, Webデザイン, Web業界の動向 こんにちは。FASTCODINGデザイナーの七転び八重子です。 今回は、簡単に画像をトリミングできるCSSをご紹介します。サイズのバラバラな画像を並べる場合に、わざわざ画像をトリミングする必要がないのでとても便利です。 目次 object-fit設定 object-fit プロパティーで使える値 1. サイズを指定して画像をトリミング 2. サイズを指定してトリミングせず余白を表示 3. 高さを固定し、横幅は画面いっぱいに表示 4. 画像の表示する位置を指定する object-fitのブラウザ対... --- ### 「Lazy Load」でページの読み込み速度を向上させる - Published: 2021-02-25 - Modified: 2021-04-06 - URL: https://fastcoding.jp/blog/all/info/lazyload/ - カテゴリー: SEO, Web業界の動向・情報, フロントエンド, 便利サービス - タグ: CSS, JavaScript, SEO, Web業界の動向, ページスピード, レイシーロード こんにちは。FASTCODINGデザイナーの七転び八重子です。 大量の画像を表示するWebページは、表示速度が遅くなりがちです。ページ速度が遅くなると、ブラウザが重くなるので、画面操作に支障が出て、UIが低下してしまいます。対処方法として、CSSスプライトやExpiresヘッダーを利用する方法がありますが、今回は「Lazy Load（レイジーロード）」を利用して、画像を遅延ロードさせる事で、ページスピードを改善する方法をご紹介します。 目次 画像を遅延ロードさせる理由 ①　ネイティブLazylo... --- ### 【アニメーション特集 -6】アニメーションを最適化してパフォーマンスを高める - Published: 2021-02-22 - Modified: 2021-04-06 - URL: https://fastcoding.jp/blog/all/info/animation-6/ - カテゴリー: Webデザイン, Web業界の動向・情報, ディレクション, フロントエンド, 便利サービス - タグ: CSS, JavaScript, Web業界の動向, アニメーション こんにちは。FASTCODINGデザイナーの七転び八重子です。 アニメーションをシリーズでまとめて見よう！第6回は、「アニメーションを最適化してパフォーマンスを高める」です。これまでの特集で、CSS、JavaScriptアニメーションの基本からおすすめライブラリをまとめましたが、アニメーションをWebサイトに取り入れる際に、一番大事なのは、パフォーマンスを維持する事です。 例えば、アニメーションが1秒間に60フレーム（60fps）未満の速さでレンダリングされると、滑らかな動きにならず、UXは低下... --- ### 【アニメーション特集 -5】JavaScriptアニメーションライブラリまとめ（2021年2月版） - Published: 2021-02-18 - Modified: 2025-03-13 - URL: https://fastcoding.jp/blog/all/info/animation-5/ - カテゴリー: Webデザイン, Web業界の動向・情報, フロントエンド, 便利サービス - タグ: JavaScript, Web業界の動向, アニメーション こんにちは。FASTCODINGデザイナーの七転び八重子です。 アニメーションをシリーズでまとめて見よう！第5回は、「JavaScriptアニメーションライブラリ2021年2月まとめ」です。前回、JavaScriptアニメーションについて、基本をまとめましたので、今回はJavaScriptおすすめライブラリのまとめです。 目次 汎用系JavaScriptアニメーションライブラリ 標準仕様！Web Animations API Anime. js GreenSock GSAP（旧Tweenmax）... --- ### 【アニメーション特集 -4】JavaScriptアニメーション基本・作り方まとめ - Published: 2021-02-15 - Modified: 2021-04-06 - URL: https://fastcoding.jp/blog/all/info/animation-4/ - カテゴリー: Webデザイン, Web業界の動向・情報, フロントエンド, 便利サービス - タグ: CSSアニメーション, JavaScript, Web業界の動向, アニメーション こんにちは。FASTCODINGデザイナーの七転び八重子です。 アニメーションをシリーズでまとめて見よう！第4回は、「JavaScriptアニメーション基本・作り方まとめ」です。CSSアニメーションについて、基本からおすすめライブラリをご紹介しましたので、今回はJavaScriptです。一見すると、難しいように思いますが、まずは基本を簡単におさらいしてみようと思います。 目次 JavaScriptでアニメーションを作る！ function(関数)の書き方 ステップ① CSSでアニメーション始めの... --- ### 【アニメーション特集 -3】CSSアニメーションライブラリ2021年まとめ - Published: 2021-02-10 - Modified: 2021-04-06 - URL: https://fastcoding.jp/blog/all/info/animation-3/ - カテゴリー: Webデザイン, Web業界の動向・情報, フロントエンド, 便利サービス - タグ: CSS, Web業界の動向, アニメーション こんにちは。FASTCODINGデザイナーの七転び八重子です。 アニメーションをシリーズでまとめて見よう！第３回は、「CSSアニメーションライブラリまとめ」です。任意の要素にクラスを付与するだけでアニメーションを実装できる便利なライブラリをまとめてみました。もちろん、動的にアニメーションの再生を制御したい場合は、JavaScriptによる処理が必要になります。 目次 CSSでアニメーションライブラリ 文字エフェクトは、「Animate. css」 ホバーアニメーションは、「HoverCSS」 画... --- ### 【アニメーション特集 -2】CSSアニメーションの基本・作り方まとめ - Published: 2021-02-08 - Modified: 2021-04-06 - URL: https://fastcoding.jp/blog/all/info/animation-2/ - カテゴリー: Webデザイン, Web業界の動向・情報, フロントエンド, 便利サービス - タグ: CSS, Web業界の動向, アニメーション こんにちは。FASTCODINGデザイナーの七転び八重子です。 アニメーションをシリーズでまとめて見よう！第二回は、「CSSアニメーションの基本・作り方まとめ」です。CSSアニメーションで実際に、利用場面が多いボタンエフェクトや要素をスライドインさせる動きを作ってみようと思います。 アニメーション特集１「アニメーションはCSSとJSのどちらを使うべきなのか？」はこちら。 目次 CSSでアニメーションを作る方法は2つ 簡単に実装できる　transition 細かく設定できる　animation t... --- ### 【アニメーション特集 - 1】アニメーションはCSSとJSのどちらを使うべきなのか？ - Published: 2021-02-01 - Modified: 2021-04-06 - URL: https://fastcoding.jp/blog/all/info/animation-1/ - カテゴリー: Webデザイン, Web業界の動向・情報, フロントエンド, 便利サービス - タグ: JavaScript, Web業界の動向, アニメーション, ディレクション こんにちは。FASTCODINGデザイナーの七転び八重子です。 WebサイトのUI/UXに欠かせないアニメーション。ボタンをふわふわ動かしたり、要素をスライドインさせたり等、アニメーションを取り入れる事でユーザーを誘導することができ、コンバージョンにも大きく影響します。ですが、使い方を間違えると、逆にUXは低下することもあります。今回はそんな、アニメーションをシリーズでまとめて見ようと思います。第一回は、「アニメーションはCSSとJSのどちらを使うべきなのか？」です。 目次 アニメーションを正し... --- ### 【2021注目】フロントエンド開発「静的サイトジェネレータ」 - Published: 2021-01-18 - Modified: 2021-04-06 - URL: https://fastcoding.jp/blog/all/info/ssg/ - カテゴリー: Web業界の動向・情報, フロントエンド, 便利サービス - タグ: Web業界の動向, フロントエンド開発, 静的サイトジェネレーター こんにちは。FASTCODINGデザイナーの七転び八重子です。 2021年は、フロントエンド開発の需要はますます高くなる見込みです。 フロントエンドのデベロッパーは、一昔前は、HTMLとCSSとjQueryをある程度知っていれば十分でしたが、昨今は、開発のスキルはもちろん、ツール、ライブラリ、フレームワークなど、常に進化し続けているシステムに対応しなければなりません。。。今回はその中で注目すべき「静的サイトジェネレータ」をまとめてみました。 目次 静的サイトジェネレータとは？ 静的サイトジェネレ... --- ### 主流のデザインソフトでWebデザイン作るときの基本設定 - Published: 2021-01-12 - Modified: 2021-04-06 - URL: https://fastcoding.jp/blog/all/info/design-tools-setting/ - カテゴリー: Webデザイン, Web業界の動向・情報, ディレクション, フロントエンド - タグ: Adobe XD, Illustrator, Photshop, Sketch, Webデザイナー, ディレクション こんにちは。FASTCODINGデザイナーの七転び八重子です。 Webサイトをデザインするにあたり、みなさんどのソフトを利用されているでしょうか？今回は、とても初歩的な内容ですが、Webサイトを構築する際に必要になるデザインデータについて、デザインソフト別に、基本設定から、パーツの切り出しまでの作業フローをまとめてみました。 目次 アートボードのサイズ Adobe XD の設定とデザイン書き出しフロー Sketch の設定とデザイン書き出しフロー Illustrator の設定とデザイン書き出し... --- ### 【2021年1月】スマホ用Webデザインはこのアートボードサイズで作ろう！ - Published: 2021-01-04 - Modified: 2021-04-06 - URL: https://fastcoding.jp/blog/all/info/iphone-size2021jan/ - カテゴリー: Webデザイン, Web業界の動向・情報, ディレクション, フロントエンド - タグ: Webデザイン, Web業界の動向, アートボード, ディレクション こんにちは。FASTCODINGデザイナーの七転び八重子です。 新型iPhone 12の発売に伴い、iPhone画面解像度を調べてみました。また、スマホ用Webデザインをする際に、どのサイズで作れば良いのかもまとめてみました。 目次 iPhone 12　解像度まとめ スマホ用Webデザインのアートボードサイズは何pxにすれば良い？ Retinaディスプレイに対応するには？ まとめ iPhone 12　解像度まとめ 端末画面サイズ画面解像度 iPhone 12 Pro Max 6. 7インチ CS... --- ### 【Illustrator実践】マスコット人形の写真をイラストにしてみよう。 - Published: 2020-12-21 - Modified: 2021-04-06 - URL: https://fastcoding.jp/blog/all/other/illustrator-1-2/ - カテゴリー: Webデザイン, その他 - タグ: Illustrator, イラスト, デザイン こんにちは。FASTCODINGデザイナーの七転び八重子です。 Webデザイナーが、絵を描いたり、ロゴを作成したりする時に使うツールがIllustrator（イラストレーター）です。イラストレーターは、ベクタ形式です。文字やイラストを拡大しても、縮小しても画像が劣化しない便利なツールです。ご紹介する操作の中にも出てきますが、点と点を線で繋げて、図形を描くので拡大しても劣化せず、形を保つ事ができます。 今回は、イラストレーター実践編です。写真のぬいぐるみやマスコットをイラストにしてみましょう！ 追... --- ### 入力率を高める！お問合わせフォームのデザイン - Published: 2020-12-14 - Modified: 2021-04-06 - URL: https://fastcoding.jp/blog/all/info/mail-form/ - カテゴリー: Webデザイン, Web業界の動向・情報, ディレクション, フロントエンド - タグ: Webデザイン, Web業界の動向, ディレクション, メールフォーム こんにちは。FASTCODINGデザイナーの七転び八重子です。 今回は、Webサイトのコンバージョン率に関わる重要なメールフォームについて、離脱させないデザイン時の注意点を考慮しながら実際に作ってみました。 目次 離脱を防ぐ！メールフォームデザインの注意点 メールフォームを作ってみる 1. テキストボックス、セレクトメニューの装飾 2. 送信ボタンの装飾 3. フォントの装飾して完成！ まとめ 　　 離脱を防ぐ！メールフォームデザインの注意点 ユーザビリティを考慮して、いかにシンプルでストレスの... --- ### プロトタイプのユーザーテストが簡単に行える「Maze」 - Published: 2020-11-18 - Modified: 2021-04-06 - URL: https://fastcoding.jp/blog/all/info/maze/ - カテゴリー: Webデザイン, Web業界の動向・情報, ディレクション, 便利サービス - タグ: Web業界の動向, プロトタイプ, ユーザーテスト こんにちは。FASTCODINGデザイナーの七転び八重子です。 Webサイトをデザインしても、作成者の意図がそのままユーザーの理解に繋がるとは限りません。そこで、プロトタイプの段階で、ユーザーテストを簡単に行えるのが「Maze（メイズ）」です。 今回は、Mazeの使い方や料金プランをまとめてみました。 目次 Maze（メイズ）とは？ プロトタイピングツールと連携 ミッションを設定し調査が実施できる 登録できるミッション ユーザーテストのレポートが取得できる Mazeの料金プラン Mazeの使い方... --- ### 【2020年版】配色の基本５ポイントと便利ツール5選！ - Published: 2020-11-11 - Modified: 2024-12-16 - URL: https://fastcoding.jp/blog/all/info/color-scheme/ - カテゴリー: Webデザイン, Web業界の動向・情報, ディレクション, 便利サービス - タグ: Webデザイン, Web業界の動向, 配色 こんにちは。FASTCODINGデザイナーの七転び八重子です。 配色を決めるときに、迷ったら配色を提案してくれる便利なサイトがありますが、結構たくさんあるので今回は厳選してみました。また、配色の基本をおさらいします。 目次 配色の仕方（基本） ① 最初はグレースケールでデザインする ② 色の意味合いを考慮する ③ 黒色を利用するときは彩度に注意する ④ 重要な要素はアクセントカラーを使用する ⑤ カラーホイールを使って決める方法 便利サイト5選 ① 2色の配色パターン見本 ② 3色の配色パターン... --- ### 【Google Fonts 高速化】必要な文字だけを読み込む方法！ - Published: 2020-11-04 - Modified: 2021-04-06 - URL: https://fastcoding.jp/blog/all/info/google-fonts-subset/ - カテゴリー: SEO, Web業界の動向・情報, ディレクション, フロントエンド - タグ: CSS, SEO対策, Webfonts, Web業界の動向, ページスピード, 高速化 こんにちは。FASTCODINGデザイナーの七転び八重子です。 Webフォント（Google Fonts）って利用されている方多いと思いますが、例えば、サイトタイトルや見出しだけ利用しているといった場合は、全ての文字を読み込むと時間がかかります。そこで、必要な文字だけを指定する事（サブセット化）で軽量化する事で読み込み速度を短縮することができます。今回は、その方法をまとめてみました。 目次 サブセット化とは？ STEP① Google Fonts の設定 STEP② サブセット化の設定 まとめ ... --- ### 2021年最新バージョンをリリース予定のFont Awesome v6！使った事がない人は必見 - Published: 2020-10-28 - Modified: 2021-02-02 - URL: https://fastcoding.jp/blog/all/info/font-awesome/ - カテゴリー: Webデザイン, Web業界の動向・情報, ディレクション, フロントエンド, 便利サービス - タグ: Webアイコンフォント, Webデザイン, Web業界の動向 こんにちは。FASTCODINGデザイナーの七転び八重子です。 2021年にFont Awesomeから最新バージョンがリリースされます。 その前に、アイコンをフォントとして扱える便利ツールFont Awesomeの使い方をまとめて見ました。 目次 Font Awesomeって何？ Font Awesome の5つのタイプ Font Awesome 無料版と有料版の違い Font Awesome 6 が2021年リリース！ Font Awesome 5 を使う準備 ＜方法1＞ CDNを使う（オス... --- ### 【2020年必須】ページスピードを上げる！PageSpeed Insights対策 - Published: 2020-10-21 - Modified: 2021-04-06 - URL: https://fastcoding.jp/blog/all/info/pagespeed/ - カテゴリー: SEO, Web業界の動向・情報, ディレクション, 便利サービス - タグ: SEO対策, Web業界の動向, ページスピード, 高速化 こんにちは。FASTCODINGデザイナーの七転び八重子です。 みなさんSEO対策の一つ、「ページスピード対策」してますか？ ページスピードが遅いと検索結果でのランキングが下がってしまう可能性があります、他にも、ユーザーが離脱しやすくなtたり、コンバージョン率にも影響すると言われています。今回は、改めてページスピード対策をまとめてみました。 目次 ページスピード対策の重要性 PageSpeed Insights（ページスピードインサイト）を利用する 1) フォールドデータ 2) ラボデータ 3)... --- ### 【2020年10月版】デザイナー必読！Webサイト横幅サイズとファーストビューサイズ - Published: 2020-10-01 - Modified: 2021-04-06 - URL: https://fastcoding.jp/blog/all/info/designswidth-2020/ - カテゴリー: Webデザイン, Web業界の動向・情報, ディレクション, フロントエンド - タグ: Webデザイン, Web業界の動向, ディレクション こんにちは。FASTCODINGデザイナーの七転び八重子です。 Webサイトのデザインの際、皆さんは何ピクセルにしていますか？２、３年変えてないって方は、要注意です。 今回は、Webデザイナーの皆さんが気になるWebサイトの横幅サイズ、2020年10月現在、何ピクセルが正解なのかリサーチしてみました。 目次 Webサイト横幅サイズとファーストビューの結論 2020年10月現在のブラウザシェア ディスクトップ モバイル 多くの企業サイトで採用されている横幅を調べてみた モバイルで推奨する最小フォン... --- ### ページスピードスコアを上げる！おすすめのWordpressプラグイン - Published: 2020-09-30 - Modified: 2021-04-06 - URL: https://fastcoding.jp/blog/all/info/pagespeed-plugin/ - カテゴリー: Web業界の動向・情報, WordPress, ディレクション, 便利サービス - タグ: SEO対策, Web業界の動向, WordPress, ページスピード, 高速化 こんにちは。FASTCODINGデザイナーの七転び八重子です。 WordPressに便利なプラグイン！今日は、ページスピードを上げてくれるプラグインをご紹介したいと思います。 目次 ページスピードの重要性 ページスピードを上げるWordPressプラグイン 1）　WebP Express 2）　PageSpeed Ninja ページスピードをテストする まとめ 　　 ページスピードの重要性 2012年、Googleはページ表示速度がランキング要因の一つであることを公表しています。2018年7月か... --- ### 今更きけない！構造化データって何？ - Published: 2020-09-24 - Modified: 2021-04-06 - URL: https://fastcoding.jp/blog/all/info/structured-data/ - カテゴリー: SEO, Web業界の動向・情報, フロントエンド - タグ: Web業界の動向, 構造化データ こんにちは。FASTCODINGデザイナーの七転び八重子です。 去年あたりから広く知られるようになった「構造化データ」。 検索エンジンに、HTMLで書かれたWebページを理解できるようにするマークアップ方法で、検索結果の表示が目立つ（カードタイプ、写真、枠）ようになります。 今回は、まだ対応していない方向けに、目的別の方法をまとめてみました。 目次 構造化データとは？ 構造化データマークアップの記述方法（シンタックス） 目的別の記述例（リッチリザルトを表示する） 1）　ニュース、ブログ、スポーツ... --- ### Can I Use （ブラウザの対応表）をブログに埋め込む - Published: 2020-09-15 - Modified: 2020-09-15 - URL: https://fastcoding.jp/blog/all/info/can-i-use/ - カテゴリー: Web業界の動向・情報, 便利サービス - タグ: Web業界の動向, デザイン こんにちは。FASTCODINGデザイナーの七転び八重子です。 今回は、Can I Use （ブラウザの対応表）をブログに埋め込んでみたいと思います。 Web業界では、皆さんが利用されている便利サイトだと思いますが、最新のブラウザの対応状況を、技術系のブログなどに埋め込めたら便利ですね。 目次 Can I Useって何？ 埋め込みタイプ ブログに埋め込む STEP1 埋め込み設定を選択する STEP2 Generateでコードを生成 まとめ 　　 Can I Useって何？ CSSのプロパティや... --- ### Googleの新しい検索ランキング指標「Core Web Vitals」とは - Published: 2020-09-09 - Modified: 2021-04-06 - URL: https://fastcoding.jp/blog/all/info/web-vitals/ - カテゴリー: SEO, Web業界の動向・情報, フロントエンド - タグ: Web業界の動向, デザイン こんにちは。FASTCODINGデザイナーの七転び八重子です。 Googleは2020年5月28日、検索ランキングの要因に、Webページの「ユーザーエクスペリエンス」をより重視することを発表しました。これまでの基本指標に加え、「Core Web Vitals（コアウェブバイタル）」を2021年を目処に ランキングの指標に加えるようです。 今回はこの「Core Web Vitals（コアウェブバイタル）」について、まとめてみました。 目次 Core Web Vitals（コアウェブバイタル）とは？... --- ### CSSで背景を斜めにデザインする方法まとめ！ - Published: 2020-09-01 - Modified: 2021-02-02 - URL: https://fastcoding.jp/blog/all/webdesign/css-diagonal-layout/ - カテゴリー: Webデザイン, フロントエンド - タグ: CSS, Webデザイン こんにちは。FASTCODINGデザイナーの七転び八重子です。 今回は、CSSで実装可能な、背景を斜めに区切ったレイアウトにする方法をご紹介します。 ちょっとした工夫ですが、結構オシャレになっちゃいます。 目次 斜めデザインを利用したサイト clip-path を利用した方法 border を利用した方法 transform:skew を利用した方法 便利なサイト まとめ 　　 斜めデザインを利用したサイト 背景カラーだけでなく、写真を斜めにしてもオシャレ。単調なサイトに躍動感、スピード感が出ま... --- ### 【保存版】CSS Flexbox プロパティまとめ - Published: 2020-08-16 - Modified: 2020-09-03 - URL: https://fastcoding.jp/blog/all/info/css-flexbox2/ - カテゴリー: Webデザイン, Web業界の動向・情報, その他, フロントエンド - タグ: Web業界の動向, デザイン こんにちは。FASTCODINGデザイナーの七転び八重子です。 前回「Flexbox（フレックスボックス）」を使ったレイアウトの仕方をまとめてみました。今回は、親要素（. flex-container）と子要素（. flex-item）に指定するプロパティのまとめです。 目次 CSS Flexboxの基本の記述 親要素（. flex-container）に指定するプロパティ 　　１. 子要素の並ぶ向き - flex-direction: ○○; 　　２. 子要素の折り返し - flex-wrap... --- ### UIデザインツールFigma②実践編 - Published: 2020-07-28 - Modified: 2020-08-18 - URL: https://fastcoding.jp/blog/all/info/figma2/ - カテゴリー: Webデザイン, Web業界の動向・情報, その他, 便利サービス - タグ: Figma, Web業界の動向, デザイン こんにちは。FASTCODINGデザイナーの七転び八重子です。 前回UIデザインツール「Figma（フィグマ）」の入門編で、料金プランからアカウント登録、初期設定までをまとめました。今回は、実践編です。基本的な操作方法をご紹介します。 目次 ツールバーの操作 レイヤーパネルの操作 ページ・フレーム・オブジェクトの作成 プロトタイプを作成 ファイルの共有とCodeモード まとめ １）　ツールバーの操作 画面上部の黒い帯状の部分がツールバーです。 １. サーチ/メニュー 階層タイプの基本メニューが表... --- ### 【2020年版】CSS Flexbox 実践！レイアウトを作る - Published: 2020-07-21 - Modified: 2020-09-02 - URL: https://fastcoding.jp/blog/all/info/css-flexbox1/ - カテゴリー: Webデザイン, Web業界の動向・情報, その他, フロントエンド - タグ: Web業界の動向, デザイン こんにちは。FASTCODINGデザイナーの七転び八重子です。 CSSでレイアウトを組む時、一昔前はfloatなどを使ってレイアウトを組む方法が一般的でしたが、最近では「Flexbox（フレックスボックス）」を使ってレイアウトする方法がよく使われるようになっています。Can I Useによる、2020年7月現在のFlexboxのブラウザ対応状況は、基本的にどのブラウザも最新バージョンではFlexboxに対応していますが、IEには若干注意が必要です。 Internet Explorerの対応状況 ... --- ### 【2020年版】商用OKな海外のオススメ無料写真素材サイト - Published: 2020-07-15 - Modified: 2020-08-20 - URL: https://fastcoding.jp/blog/all/info/photo-sozai2020/ - カテゴリー: Webデザイン, Web業界の動向・情報, その他, 便利サービス - タグ: Web業界の動向, デザイン こんにちは。FASTCODINGデザイナーの七転び八重子です。 Webデザインやモックアップに欠かせない写真素材。どんな写真を使うかでデザインのイメージが大きく変わりますが、今回は色々な写真素材サイトの中から、私が実際に利用している無料のサイトを厳選してみました。 厳選ポイント 今回は、以下5つのポイントで厳選しました。 ・無料ダウンロード ・商用利用可能 ・著作権表記不要 ・画像の解像度 ・写真点数 目次 無料写真素材を使用する時の注意点 オススメ無料写真素材サイト 1. pixabay 2.... --- ### UIデザインツールFigma ①入門編 - Published: 2020-06-29 - Modified: 2020-07-31 - URL: https://fastcoding.jp/blog/all/info/figma1/ - カテゴリー: Webデザイン, Web業界の動向・情報, その他, 便利サービス - タグ: Figma, Web業界の動向, デザイン こんにちは。FASTCODINGデザイナーの七転び八重子です。 普段デザインでは、Sketchを主に利用している私ですが、同じくUIデザインツール「Figma（フォグマ）」を実はまだ触った事がありません。そこで、更なるスキルアップの為に、Figmaを導入する事にしました。今回は、そもそもFigmaで何ができるのか、その特徴や導入の入門編をまとめてみました。 目次 Figma（フィグマ）とは Figmaの料金プラン アカウントの登録と初期設定 Figmaのファイル管理 Sketchファイルのインポ... --- ### 【2020年】新しいデザインのトレンド「ニューモーフィズム」に注目 - Published: 2020-06-12 - Modified: 2020-08-20 - URL: https://fastcoding.jp/blog/all/info/neumorphism/ - カテゴリー: Webデザイン, Web業界の動向・情報, その他 - タグ: Web業界の動向, デザイン こんにちは。FASTCODINGデザイナーの七転び八重子です。 昨年末から新しいWebデザインのトレンドとして注目されている「ニューモーフィズム（Neumorphism）」 今回は、ニューモーフィズムの特徴とデザインの仕方をまとめてみました。 目次 ニューモーフィズムとは？ ニューモーフィズムのルール Sketchでデザインしてみる ニューモーフィズムのメリットとデメリット ニューモーフィズムを使ったデザイン コピペで使える無料オンラインサービス まとめ 　　 １）　ニューモーフィズムとは？ ニ... --- ### 手書きのイラストを簡単にベクトルデータ化できるAdobe Capture！ - Published: 2020-04-13 - Modified: 2020-08-18 - URL: https://fastcoding.jp/blog/all/info/adobe-capture/ - カテゴリー: Webデザイン, Web業界の動向・情報, 便利サービス - タグ: Web業界の動向, アプリ, デザイン, 便利サービス こんにちは。FASTCODINGデザイナーの七転び八重子です。 デザイナーのみなさん、手書きのイラストや写真を編集・加工する際は、どんなツールを利用していますか？ 私の場合は、スキャンしてパソコンに取り込み、Illustratorのトレースを使ってベクトルデータにして編集していました。これ、結構時間もかかるし大変なんですよね。。。 そこで今回、ご紹介するのは、そんな作業を格段に楽にしてくれる「Adobe Capture」です。 このアプリを利用すれば、イラストの取り込みが格段に早くなるだけでなく... --- ### 【２０２０年】SEO対策はどうなるのか？抑えて置きたいポイント - Published: 2020-04-01 - Modified: 2024-10-31 - URL: https://fastcoding.jp/blog/all/info/2020seo/ - カテゴリー: SEO, Webデザイン, Web業界の動向・情報 こんにちは。FASTCODINGデザイナーの七転び八重子です。 2019年、Goole Chromeが検索アルゴリズムのアップデート（BERT）を行いました。これにより検索結果の精度がより向上しました。 Googleの検索精度は年々進化しています。それに伴い、SEOはどう変わったのでしょうか？数年前まで、SEO対策は専門の業者に依頼していましたが、最近はSEOはやらなくてもいいのではないかと放置されてしまう会社も増えてきたように思います。そんな、SEOの動向とこれから抑えて置きたいポイントをまと... --- ### 2020年9月以降、Google検索の表示順位はモバイルサイトが対象へ！SEOへの影響と対応方法まとめ - Published: 2020-03-16 - Modified: 2020-07-31 - URL: https://fastcoding.jp/blog/all/info/google-mobile-first-index/ - カテゴリー: SEO, Web業界の動向・情報 - タグ: SEO対策, Web業界の動向 こんにちは。FASTCODINGデザイナーの七転び八重子です。 2020年3月5日、Googleは公式ブログにて、2020年9月から全Webサイトを「モバイルファーストインデックス（MFI：Mobile First Indexing）」に移行することを発表しました。 以下公式ブログ https://webmasters. googleblog. com/2020/03/announcing-mobile-first-indexing-for. html 今回は、MFIに変わると何がどうなるのか？... --- ### 2020年Adobe Flash終了の要因とリスク！HTML5への移行 - Published: 2020-03-03 - Modified: 2020-07-31 - URL: https://fastcoding.jp/blog/all/info/flash-animation/ - カテゴリー: Web業界の動向・情報, フロントエンド - タグ: Flash, JavaScript, Web業界の動向, フロントエンド こんにちは。FASTCODINGデザイナーの七転び八重子です。 Adobe Flashがいよいよ、2020年末でサポート終了となります。 今回は、Flash終了に伴うリスクとHTML5への移行方法をまとめてみました。 目次 Flash終了の要因とリスク 　　１）　セキュリティリスク 　　２）　スマートフォンの普及 　　３）　タッチスクリーンに対応できない 　　４）　各ブラウザもサポート終了へ FlashからHTML5やJavaScriptへ移行する方法 　　１）　HTML5を使う方法 　　２）　... --- ### WEB制作の修正依頼はAUN「あうん」を使って効率化しよう - Published: 2020-03-02 - Modified: 2021-10-07 - URL: https://fastcoding.jp/blog/all/other/tool-aun/ - カテゴリー: その他, ディレクション, 便利サービス - タグ: ディレクション, 作業効率化 （記事更新：2020年8月18日） こんにちは。FASTCODINGデザイナーの七転び八重子です。 Webサイトの制作で修正依頼を出す際にどのようなツールをお使いですか？ 今日、ご紹介するのは、Web制作の現場で、バグや修正の指示をスムーズにするために作られた「AUN（あうん）」です。 目次 AUN（あうん）とは AUNの使い方 1. AUNに画像を取り込む 2. 取り込んだ画像にメモを書き込む 3. 画像（キャプチャー）を追加する 4. 画像（キャプチャー）を共有する まとめ AUN（あうん）... --- ### 【２０２０年版】Chrome拡張機能！テーマ別厳選１６ - Published: 2020-02-03 - Modified: 2024-08-26 - URL: https://fastcoding.jp/blog/all/info/extension2020/ - カテゴリー: Webデザイン, Web業界の動向・情報, 便利サービス - タグ: 作業効率化, 初心者 こんにちは。FASTCODINGデザイナーの七転び八重子です。 みなさん、どのブラウザ使ってますか？私は、ほぼChrome(クローム)です。人気ですねよ〜 今回は、改めてクロームを使う理由と、オススメの拡張機能をまとめてみました。 目次 Chrome（クローム）の人気の秘密 　　－高速でシンプル 　　－とにかく動作が安定している「サンドボックス方式」 　　－どのパソコンでも同じ設定が使える Webデザイナーにおすすめの拡張機能１０選 　　１）　ColorPick Eyedropper 　　２）　... --- ### Google BERT の導入により、これまで以上にWebコンテンツが重要になる - Published: 2020-01-20 - Modified: 2020-07-31 - URL: https://fastcoding.jp/blog/all/info/googlebert/ - カテゴリー: SEO, Web業界の動向・情報 - タグ: google BERT, SEO対策 こんにちは。FASTCODINGデザイナーの七転び八重子です。 2019年12月、Googleは検索アルゴリズムの大規模なアップデートを行いました。最新の自然言語処理モデル「BERT（バート）」を日本を含む世界の70以上の言語に適用させたことを発表しました。 追加された言語はこちら アフリカーンス語、アルバニア語、アムハラ語、アラビア語、アルメニア語、アゼリ語、バスク語、ベラルーシ語、ブルガリア語、カタロニア語、中国語（簡体字＆台湾）、クロアチア語、チェコ語、デンマーク語、オランダ語、英語、エス... --- ### リモートワークに最適！外出先からPCを遠隔操作するChromeリモートデスクトップ - Published: 2020-01-20 - Modified: 2020-07-31 - URL: https://fastcoding.jp/blog/all/info/remote-desktop/ - カテゴリー: Web業界の動向・情報, 便利サービス - タグ: Web業界の動向, ディレクション, 作業効率化, 初心者 こんにちは。FASTCODINGデザイナーの七転び八重子です。 昨今のコロナウィルス問題や、働き方改革の流れを受けて、オフィス以外で仕事をする「リモートワーク」の流れが加速しています。 リモートワークのためのツールはたくさんありますが、実はGoogleChromeブラウザにも、「リモートワーク」に役立つ機能があるんです！ 今回は外出先から自宅やオフィスにあるパソコンを遠隔操作できる「Chromeリモートデスクトップ」の設定方法をまとめてみました。 目次 Chrome（クローム）リモートデスクトッ... --- ### 【2020年12月版】Sketchで絶対入れたいプラグイン7選 - Published: 2020-01-12 - Modified: 2025-01-17 - URL: https://fastcoding.jp/blog/all/info/sketch-plugin2020/ - カテゴリー: Webデザイン, Web業界の動向・情報, ディレクション, 便利サービス - タグ: Web業界の動向, 構造化データ こんにちは。FASTCODINGデザイナーの七転び八重子です。 今回は、Sketchで愛用しているプラグイン、オススメをまとめて見ました。合わせて、プラグインの探し方からインストール方法もおさらいです。 目次 プラグインのダウンロード プラグインのインストール方法 オススメプラグイン6選 1. Separate Shapes 2. Rename It 3. Paddy 4. Craft 5. Stark 6. Split Shape まとめ 　　 プラグインのダウンロード プラグインは公式ページ... --- ### Webアクセシビリティ対応②　<実装編>　チェックリスト17項目 - Published: 2020-01-07 - Modified: 2020-07-31 - URL: https://fastcoding.jp/blog/all/info/accessibility-2/ - カテゴリー: Webデザイン, Web業界の動向・情報 - タグ: マテリアルデザイン こんにちは。FASTCODINGデザイナーの七転び八重子です。 前回、Webアクセシビリティの基礎編をやりましたが、今回は実装編です。 要注意 この基準を満たせないコンテンツが一部にでも存在すると、サイト内・ページ内の他の箇所にも干渉してアクセスを妨げる可能性があります。 【１】 動画や音声を自動再生しない 動くものに注意を奪われたり、読み上げ音声が聞きづらくなったりすることで、ページ全体の利用を妨げられる場合があります。カルーセルを含む動画や音声は自動再生を避け、ユーザー側で停止などのコントロ... --- ### Webアクセシビリティ対応①　基礎編 - Published: 2019-12-16 - Modified: 2020-07-31 - URL: https://fastcoding.jp/blog/all/info/accessibility-1/ - カテゴリー: Web業界の動向・情報, フロントエンド - タグ: JIS X 8341-3, WCAG, アクセシビリティ, ユーザビリティ こんにちは。FASTCODINGデザイナーの七転び八重子です。 アクセシビリティ対応！完璧ですか？ 昨今、公的機関のWebサイトだけでなく、一般サイトにもその対応が広まっています。 一昔前は、身体的制限のある方に向けた対応というイメージがありましたが、デバイスの多様化や、使用する側の環境も様々になり、より多くの人にWebサイトの情報やサービスを利用してもらう為には、なくてはならない対策です。 この機会に、どんな作業をしたら「アクセシビリティ対応をした」と言えるのか、改めて勉強してみようと思います... --- ### 【4】マテリアルデザイン践実　③カードのルールと使い方 - Published: 2019-11-14 - Modified: 2020-07-31 - URL: https://fastcoding.jp/blog/all/info/material-design4/ - カテゴリー: Webデザイン, Web業界の動向・情報 - タグ: マテリアルデザイン こんにちは。FASTCODINGデザイナーの七転び八重子です。 マテリアルデザイン実践、第３弾はカードのルールと使い方について。 以前、「紙のルール」をご紹介しましたが、今回は具体的にカードを使ってどうデザインするかをまとめてみました。 カードとは？ カードは関連性のある情報をまとめたものです。カード自体がボタンになり、詳しい情報への入り口としてよく使われます。例えば「記事一覧」「商品一覧」などです。情報を詰め込まず、重要な事柄だけに絞って表示します。カード上ではテキストや写真、ボタンなどを配置... --- ### 【3】マテリアルデザイン実践　②ボタンのルールと作り方 - Published: 2019-11-07 - Modified: 2020-07-31 - URL: https://fastcoding.jp/blog/all/webdesign/material-design3/ - カテゴリー: Webデザイン - タグ: Web業界の動向, デザイン こんにちは。FASTCODINGデザイナーの七転び八重子です。 前回マテリアルデザインの実践で「カラーの選び方」をご紹介しましたが、今回は、実践編２「ボタンのルールと作り方」です。 マテリアルデザインでカラーを決めたら、パーツづくりとしてボタンを揃えておくとデザインがスムーズですね。 １　ボタンの種類 マテリアルデザインでは、主に５つのボタンを使います。ボタンの重要度によって、使い分けます。 重要度：高　フローティングアクションボタン（FAB） マテリアルデザインらしいボタンの一つです。FABは... --- ### 【2】マテリアルデザイン実践　①カラーの選び方 - Published: 2019-10-22 - Modified: 2020-07-31 - URL: https://fastcoding.jp/blog/all/webdesign/material-design2/ - カテゴリー: Webデザイン - タグ: Web業界の動向, デザイン こんにちは。FASTCODINGデザイナーの七転び八重子です。 前回「これまでのデザインとマテリアルデザイン」をご紹介しましたが、今回は、実践編です。 マテリアルデザインで最初にするカラーの選び方について解説します。 １　使用するカラーを決める 最初にサイトで使用するカラーを選んでおきましょう。 ・プライマリーカラー（メイン） Webサイトで一番使うベースになる色。 ・プライマリーバリアント（サブ） 補助的に使う色です。メインカラーと同じ色合いで薄い色と濃い色を選んでおきましょう。 ・セカンダリ... --- ### 【1】これまでのデザインとマテリアルデザイン - Published: 2019-10-21 - Modified: 2020-07-31 - URL: https://fastcoding.jp/blog/all/info/material-design1/ - カテゴリー: Webデザイン, Web業界の動向・情報 - タグ: デザイン, ユーザビリティ, 初心者 こんにちは。FASTCODINGデザイナーの七転び八重子です。 Webデザインをする上で基本的な考え方のベースになる「マテリアルデザイン」 マテリアルデザインを知らない人でも、AndroidやYouTube、GoogleMapなど身近なサービスに適用されているため、日頃目にしているデザイン手法です。今回は、これまでのデザインとマテリアルデザインの違いと基本原則をご紹介します。 Index 1　マテリアルデザインとは？ 2　これまでのデザインとマテリアルデザイン 　（１）初代リッチデザイン（スキュ... --- ### 【2】Sketchの導入方法と基本操作 - Published: 2019-06-19 - Modified: 2020-03-02 - URL: https://fastcoding.jp/blog/all/webdesign/2019sketch-2/ - カテゴリー: Webデザイン - タグ: Sketch, デザイン こんにちは。FASTCODINGデザイナーの七転び八重子です。 前回は、Web制作のUIデザインツールとして有名な「Sketch」について、 【1】WEBデザイナーがSketchを使う理由 を紹介しました。今回は、実際にSketchのインストールから基本操作を紹介します。 目次 1　Sketch（スケッチ）注意事項とライセンス料金について 2　Sketchのインストールと起動 3　ワークスペースと操作メニュー 　（１）アートボードを配置する 　（２）図形ツールと変形 　（３）テキストを装飾する ... --- ### 【1】WebデザイナーがSketchを使う理由 - Published: 2019-06-12 - Modified: 2020-07-31 - URL: https://fastcoding.jp/blog/all/webdesign/2019sketch-1/ - カテゴリー: Webデザイン - タグ: Sketch, デザイン こんにちは。FASTCODINGデザイナーの七転び八重子です。 今回は、Web制作のUIデザインツールとして有名な「Sketch」の便利な機能を紹介します。 目次 1）　Sketch（スケッチ）とは？ 2）　Sketchと他のツールを比較してみる 3）　Sketchの便利な機能 　－ １サイトを１ファイルで作れる軽さ 　－ ワークスペースをページで分けてスッキリ 　－ ちょこっとしたデザインが全てに反映されるシンボル機能 　－ ボタンや見出しの装飾にはスタイルで共通化 　－ デザインの共有もクラ... --- ### Googleしごと検索（Google for jobs）がついに日本上陸！構造化データなど対応方法まとめ - Published: 2019-03-01 - Modified: 2020-07-31 - URL: https://fastcoding.jp/blog/all/info/google-for-jobs/ - カテゴリー: SEO, Web業界の動向・情報 - タグ: Web業界の動向 こんにちは。FASTCODINGです。 2019年1月23日、ついに日本でもGoogle for Jobs（日本での名称は「Googleしごと検索」） がリリースされました！ じつは私、Google for Jobsの日本対応をワクワクして待っていました。 だって、もしかしたら今後の求人市場が大きく変わるかもしれない出来事！ Google for Jobsは、人材採用に悩む企業の新たなツールになるかもしれません。 ということで今回は、Google for Jobsに対応するメリット・デメリットや... --- ### Google MAPS APIが7/16有料化？地図を埋め込んでいるサイトは要確認！ - Published: 2018-07-05 - Modified: 2024-08-07 - URL: https://fastcoding.jp/blog/all/jquery/google-maps-no-longer-free/ - カテゴリー: jQuery, Web業界の動向・情報 こんにちは。FASTCODINGです。 Googleマップといえば、目的地までの道のりを調べたり ストリートビューで回りの様子を見てみたりと、近頃私たちにとってとても身近なサービス。 そんなGoogleマップの中でも、企業サイトやイベントサイトなどのウェブページへのマップ埋め込みに 多く利用されているGoogle MAP APIのサービスが2018年7月16日から大きく変わり、Google Maps Platformに移行します。 期限まで残すところあとわずか。 突然、管理サイトに埋め込んである... --- ### Googleマップをサイトに追加する方法 - Published: 2018-06-25 - Modified: 2020-07-31 - URL: https://fastcoding.jp/blog/all/jquery/howtoaddgooglemap/ - カテゴリー: jQuery こんにちは。ベトナムオフィスのThanh（タン）です。 今回はGoogleMapの使い方について、弊社でよく行うパターンをご紹介いたします。 企業様のWEBサイトに、ほぼ必ず存在するのが所在地の地図。 ひと昔前は、いちいち地図画像を作成することもありましたが 最近はGoogleマップを埋め込むのが主流ですよね。 を使って埋め込むこともできますが、 カスタマイズした地図を表示したいならGoogleマップAPIの利用をオススメします。 ということで、このチュートリアルでは、Googleマップの作成方... --- ### 日本だからって無視出来ない！WordpressをGDPR対応するには - Published: 2018-06-14 - Modified: 2024-10-31 - URL: https://fastcoding.jp/blog/all/info/gdpr/ - カテゴリー: Web業界の動向・情報, WordPress こんにちは。 FASTCODINGです。 突然ですが、5/25よりEU域内において適用が開始された 個人情報に関する法律『GDPR』をご存知ですか？ なんとなく聞いたことあるけどEUの法律だから日本は関係ないんでしょ？ いえいえ、とんでもないっ！ 日本で運営しているサイトでもしっかり対応しておかないと 最悪とんでもない罰則をうけることになりかねません。 今回は記事ではGDPRについて、 Wordpressの設定に絞ってご説明しようと思います。 目次 1. まずはGDPRについて調べる 　GDPR... --- ### jQueryによるフォームの検証 - Published: 2018-06-01 - Modified: 2024-07-24 - URL: https://fastcoding.jp/blog/all/jquery/jquery-form-validation/ - カテゴリー: jQuery, システム開発 ※こちらのプラグインはかなり古くなってしまいましたので提供を終了しております。ご了承ください。 こんにちは！ファストコーディングの働くおかんこと、石井です。 急に暑くなったと思ったら肌寒かったり、夏が近いなぁと思っていたら今度は梅雨、、 季節の変わり目って大変ですよね。 特に梅雨の時期はジメッとしていて、湿度は高いし、髪はうねるし、洗濯物は乾かないし、 早く過ぎてほしいと祈るばかりです。 でも、道端のアジサイには毎日癒されています。 私にとっては、この時期一番の楽しみです。 さて、今回はフォーム... --- ### サイト移転に必須!!301リダイレクトの為の.htaccess書き方5選 - Published: 2018-05-25 - Modified: 2020-07-31 - URL: https://fastcoding.jp/blog/all/frontend/htaccessredirect/ - カテゴリー: SEO, システム開発, フロントエンド WEBサイトの引越しの際、忘れてはいけないのが 旧サイトから新サイトへのリダイレクト設定。 旧サイトへアクセスしたら、自動的に新サイトに飛ばしてくれるアレですね。 今回は、リダイレクト設定を行うメリットや実際に使える htaccessの書き方についてご紹介いたします。 目次 1. WEBサイトの引越しでリダイレクトをする理由 2. 301リダイレクト設定はhtaccessで 3. よく使う301リダイレクト書き方5選 4. 参考URL WEBサイトの引越しでリダイレクトをする理由 通常WEBサイ... --- ### jQueryを使うには何を準備したらいいの？jQueryことはじめ - Published: 2018-05-23 - Modified: 2020-07-31 - URL: https://fastcoding.jp/blog/all/jquery/jquerybeginner/ - カテゴリー: jQuery, システム開発 ホームページを、より魅力的に見せたりユーザーの操作性向上のために 欠かせないのがJavascriptを使った動きの実装。 さまざまなJavascriptのライブラリが開発されていますが、 中でも、jQueryは最初の公開から10年以上が経過しているにもかかわらず まだまだ多くのWEBサイトで採用されています。 今回は、『jQueryことはじめ』と題して jQueryを触ったことがない方に向けて プログラムを使うための準備や、簡単な記述方法をご紹介いたします。 目次 1. まずはjQueryを読み... --- ### どれを選ぶ？導入シェアから見るオススメCMSツール紹介 - Published: 2018-05-16 - Modified: 2020-07-31 - URL: https://fastcoding.jp/blog/all/direction/cmsshare/ - カテゴリー: WordPress, ディレクション, 便利サービス こんにちは。ファストコーディングです。 このブログをご覧いただいているあなたの会社の WEBサイトは、どのように更新・運用していますか？ 新着情報の更新がある度に、社内のWEB担当者に修正してもらっている？ 社内にWEB担当者が居ないから、些細な更新の度に外部に依頼している？ 最近は、スマートフォンの普及などの影響で 自分の知りたい情報を、その場で検索するユーザーが増えてきました。 リアルタイムに検索されるということは、情報を提供する側の企業も 即座にWEBサイトを更新し、ユーザーに応える必要が... --- ### 【2018年4月版】もう迷わない！Webサイト横幅サイズの大正解 - Published: 2018-05-07 - Modified: 2020-07-31 - URL: https://fastcoding.jp/blog/all/webdesign/designswidth-2018/ - カテゴリー: Webデザイン こんにちは、FASTCODINGです。 突然ですが弊社ブログの中で最も人気のある記事をご存知ですか？ 答えはこちら↓ Webサイトデザインの横幅サイズ！もう何pxか迷わない！ 2017年1月版 人気なのはとても嬉しいことなのですが、WEBを閲覧するデバイスの進化は日進月歩。 去年の常識が今年の常識であるとは限りません！ ということで2018年4月現在、パソコン用のWEBサイトは何pxで作るの？スマートフォン用は何pxがいいの？ 最新のウェブデザイン横幅事情を改めてまとめてました。 Webサイトを... --- ### 2017年終盤の今、常時SSL化を急がねばならない理由＜後編＞ - Published: 2017-12-14 - Modified: 2024-07-24 - URL: https://fastcoding.jp/blog/all/info/%e5%b8%b8%e6%99%82ssl%e5%8c%96%e3%82%92%e6%80%a5%e3%81%8c%e3%81%ad%e3%81%b0%e3%81%aa%e3%82%89%e3%81%aa%e3%81%84%e7%90%86%e7%94%b1_%e5%be%8c%e7%b7%a8/ - カテゴリー: Web業界の動向・情報 - タグ: Web業界の動向, セキュリティ, 初心者, 参考 こんにちは、ファストコーディングです。 ここ数年、WEBサイトの新規立ちあげ時やリニューアルの際の 検討必須事項といえば常時SSL化（HTTPS） 全3回でお送りしているこのシリーズも今回がラスト。 最終回は、常時SSL化の導入方法についてお伝えします！ ところで常時SSLって？ ここまでSSLについて説明してきましたが、昨今話題になっているのは『常時』SSL。 『常時SSL』とは、サイト内のすべてのページをSSL化することを指します。 国内主要企業サイトの常時SSL化（https完全対応）は2... --- ### 2017年終盤の今、常時SSL化を急がねばならない理由＜中編＞ - Published: 2017-12-14 - Modified: 2024-07-24 - URL: https://fastcoding.jp/blog/all/info/%e5%b8%b8%e6%99%82ssl%e5%8c%96%e3%82%92%e6%80%a5%e3%81%8c%e3%81%ad%e3%81%b0%e3%81%aa%e3%82%89%e3%81%aa%e3%81%84%e7%90%86%e7%94%b1_%e4%b8%ad%e7%b7%a8/ - カテゴリー: Web業界の動向・情報 - タグ: Web業界の動向, セキュリティ, 初心者 こんにちは、ファストコーディングです。 ここ数年、WEBサイトの新規立ちあげ時やリニューアルの際の 検討必須事項といえば常時SSL化（HTTPS） 全3回でお送りしているこのシリーズ。 ≪前編≫では、SSLの説明とSSL化するメリットを書きましたが、 2回目となる今回は、SSLの種類や選び方についてお伝えします！ SSL導入で迷っているWEB担当者はぜひご一読ください。 目次 ●SSLにも種類があります 　独自SSLと共有SSL 　サーバー証明書の認証レベルによる違い 　認証局（ブランド）による... --- ### 2017年終盤の今、常時SSL化を急がねばならない理由＜前編＞ - Published: 2017-12-11 - Modified: 2024-07-24 - URL: https://fastcoding.jp/blog/all/info/%e5%b8%b8%e6%99%82ssl%e5%8c%96%e3%82%92%e6%80%a5%e3%81%8c%e3%81%ad%e3%81%b0%e3%81%aa%e3%82%89%e3%81%aa%e3%81%84%e7%90%86%e7%94%b1_%e5%89%8d%e7%b7%a8/ - カテゴリー: Web業界の動向・情報 - タグ: Web業界の動向, セキュリティ, 初心者 こんにちは、ファストコーディングです。 ここ数年、WEBサイトの新規立ちあげ時やリニューアルの際の 検討必須事項といえば常時SSL化（HTTPS） だけど、そもそもなんでSSL化しなきゃいけないの？ SSL化するメリットってなんなの？ SSLの選び方って？ 今のサイトをSSL化するにはどうしたらいいの？ などなど、対応必須とは言え何がなんだかわからないWEB担当者の皆さまに向けて SSLについて全3回にまとめてみました。 まず1回目の今回は、SSLについての基本をお伝えします！ そもそもSSLっ... --- ### WordPressを導入した方が良い理由 - Published: 2017-08-16 - Modified: 2025-03-31 - URL: https://fastcoding.jp/blog/all/frontend/wordpress%e3%82%92%e5%b0%8e%e5%85%a5%e3%81%97%e3%81%9f%e6%96%b9%e3%81%8c%e8%89%af%e3%81%84%e7%90%86%e7%94%b1/ - カテゴリー: WordPress, システム開発, フロントエンド こんにちは！ディレクターの楠本と申します(^_-)-☆   最近のＷＥＢサイトでお馴染みとなっているCMSツール・・ WordPress、Movable Type、MODxなどなど様々な種類のCMSがありますが その中でも特に利用されているのがWordPressですね。 WEBサイトの1/3がWordPressだといわれているほど多くのサイトに取り入れらており大変人気のツールです。   しかーし人気である一方で「導入するメリットは何？」「どんなサイトに使えばいいの？」 などなど、よくわからない方... --- ### 【初心者編】Googleアナリティクス基礎：トラッキングコードの取得・設置 - Published: 2017-08-02 - Modified: 2024-09-16 - URL: https://fastcoding.jp/blog/all/frontend/googleanalytics-trackingcode/ - カテゴリー: SEO, フロントエンド どうもディレクター楠本です。 前回のブログでは書いていませんでしたが、私は実は・・ITなんて無縁！絶対無理！そもそもPCも使いこなせてないし('ω')ノ (ヾﾉ･∀･`)ﾑﾘﾑﾘ・・・・というところから、今こうしてファストコーディングでディレクターをしておりまして。   今回のテーマは「Googleアナリティクス」についてですが、もちろんこれも「？？？」だった時がそう遠くない過去のことなわけなのです。 ITと関係のないところにいる人は知ることがないんですよね。なので新人ディレクターさん、またはW... --- ### 【コピペ】HTMLフォームのselect項目まとめ(生年月日・年齢・都道府県・職業) - Published: 2017-06-20 - Modified: 2024-07-24 - URL: https://fastcoding.jp/blog/all/frontend/form-select/ - カテゴリー: フロントエンド - タグ: HTML, コーディング, フロントエンド, ユーザビリティ こんにちは、ディレクターのせりなです。 HTMLで問い合わせフォームなんかを作るとき用に セレクトメニューの中身をサクッとコピペできる、とーーーっても便利な一覧を作りました！ 私は平和主義なので、ひとり占めしないでみなさんにも共有します。 よくある生年月日や都道府県、困りがちな業種選択まで 10種類ほど揃えてみたのでどうぞご活用ください。 目次 1. 西暦 (1900-2030年) 2. 月 (1-12月) 3. 日 (1-31日) 日付選択・カレンダー 4. 年齢 5. 数字 (1-99) 6... --- ### Retina対応のWebデザインをするときの注意点 - Published: 2017-06-13 - Modified: 2024-07-21 - URL: https://fastcoding.jp/blog/all/webdesign/retina-weddesign/ - カテゴリー: Webデザイン - タグ: デザイン, 初心者 こんにちは、ディレクターのせりなです。 このページにたどり着いたあなたはきっと クライアントにRetinaディスプレイに対応したWebサイトを作ってって言われたけど 「すみません、"れてぃーな"って何ですか？」 「あー、あの綺麗に見える画面のことね！・・・TVの話？」 「Retina対応って言うけど、何をどうすれば対応できるの？」 って思っているWebデザイナーさんではないでしょうか？ 世の中では一般的になりすぎて、今更ひとに聞けないRetinaディスプレイと そのWebデザインを作るうえで注意... --- ### 新人WebディレクターのためのWeb業界用語【初心者用】 - Published: 2017-05-23 - Modified: 2024-07-24 - URL: https://fastcoding.jp/blog/all/direction/director-words/ - カテゴリー: ディレクション - タグ: ディレクション, 初心者 こんにちは、ディレクターのせりなです。 Webディレクターになったはいいけど、知らない英単語とか略称が日々社内で飛び交ってて 先輩が何言ってるのかさっぱりわからない・・・ そんな新人Webディレクターの為に、私が社内外でよく耳にする Webディレクターの為のWeb業界用語をまとめてみました！！ 上司との日常会話から、お客様先とのスケジュール調整まで 新人ディレクターには覚えなきゃいけない用語が沢山あります。 早く日常に慣れるためにも、予備知識として覚えておきましょう！ 目次 0. Webディレク... --- ### Google web fontsの雰囲気別おすすめ30選！Webフォントを導入しよう！ - Published: 2017-05-10 - Modified: 2024-08-19 - URL: https://fastcoding.jp/blog/all/webdesign/google-webfonts-recommended/ - カテゴリー: SEO, Webデザイン, フロントエンド - タグ: CSS, HTML, SEO, デザイン, フロントエンド, 初心者 . nolink {font-size: 1. 8em; color: #000;} . section-blog . article-details p. addlink {font-size: 14px; line-height: 1. 5; margin: 0;} こんにちは、ディレクターのせりなです。 どのパソコン、どのスマートフォンで見ても同じフォント(書体)で表示してくれて 種類も豊富、使い方も簡単といいところばかりのGoogle webフォント。 そのGoogle webフォントか... --- ### 【簡単】Webフォントの使い方！Google web fontsを使ってみよう - Published: 2017-04-27 - Modified: 2024-07-21 - URL: https://fastcoding.jp/blog/all/webdesign/web-fonts/ - カテゴリー: SEO, Webデザイン, フロントエンド - タグ: CSS, HTML, SEO, デザイン, フロントエンド, ユーザビリティ, 初心者 こんにちは、ディレクターのせりなです。 Webフォントって聞いたことありますか？ 最近はそれなりに普及してきたんじゃないかなと思うのですが まだまだ知らない人の為に、今日はとっても簡単で便利なWebフォントの 使い方とメリット・デメリットをご紹介します。 目次 　1. Webフォントとは 　2. Webフォントのメリット・デメリット 　3. Webフォントの設置方法は2パターン 　4. Google web fontsを使ってみよう！ 　5. 関連サイト 　6. さいごに 1. Webフォントと... --- ### 【WordPress初心者】使い方と注意点まとめ！ - Published: 2017-04-25 - Modified: 2024-07-11 - URL: https://fastcoding.jp/blog/all/direction/wp_howtouse/ - カテゴリー: WordPress, ディレクション - タグ: WordPress, ディレクション, 初心者 こんにちは、ディレクターのせりなです。 WordPressサイトを制作会社に依頼して作ってもらったけど 初めて使うし、何に気を付ければいいのかわからない・・・ 変なところ触っちゃって、システムが壊れちゃったらどうしよう・・・ なんてこと、ありますよね？ そんなビギナーさんの為によくある質問から、こんなときどうしたらいいの？まで、 WordPressの使い方・注意点マニュアルを作ってみましたのでご覧ください！ 目次 WordPress(ワードプレス)とは 1. WordPressのバージョンアップ... --- ### 【レスポンシブ】PCとスマホで違う画像に切り替える方法！CSSだけで簡単画像切り替え！ - Published: 2017-04-18 - Modified: 2020-07-31 - URL: https://fastcoding.jp/blog/all/frontend/responsive_img/ - カテゴリー: フロントエンド - タグ: CSS, HTML, コーディング, 初心者 こんにちは！ディレクターのせりなです。 レスポンシブサイトを制作するうえで、 パソコンにはパソコン用に、スマートフォンにはスマートフォン用に 違うデザインの画像を使いたいことってありますよね？ いっぱいCSSを書いたり、不慣れなJavaScriptを使ったり 世の中には難しい方法が沢山ありますが・・・ なんかどれもよくわかんない。もーヤダ！っていうあなたに朗報！ 私が知っているなかで1番シンプルかつ使いやすい方法をご紹介します！ 今日からはもうレスポンシブ対応で悩まなくて大丈夫です！ レスポンシ... --- ### HTML5.1を使ってSEOに強いセマンティックコーディングをする方法 - Published: 2017-04-07 - Modified: 2024-10-30 - URL: https://fastcoding.jp/blog/all/html5toseo/ - カテゴリー: SEO, すべて, フロントエンド - タグ: HTML, SEO, フロントエンド FASTCODINGの波乗りディレクター尾島です。 「HTML5. 1」について 2016年11月1日にW3CはHTML5. 1を勧告しました。 これはHTML5をバージョンアップするものとなります。 HTML5. 1は、 「さらなる標準化と、HTML5で定義しきれなかった部分の仕様変更」 が行われたものと考えて良いです。 　・ HTML 5. 1における変更点 　・ 各ブラウザでの実装状況 HTML5. 1は、より手軽に機能を実装できるような改良が施されていて、 今までCSSやJavaScri... --- ### 【初心者向け】HTML、CSS、JavaScriptの違いと役割について - Published: 2017-03-09 - Modified: 2024-07-24 - URL: https://fastcoding.jp/blog/all/jquery/html-css-javascript/ - カテゴリー: jQuery, フロントエンド - タグ: CSS, HTML, JavaScript, コーディング, フロントエンド, 初心者 こんにちは、ディレクターのせりなです。 これからプログラミングを勉強してみようかな！っていうエンジニア志望の人や 自分はWebサイトを作らないけど、エンジニアが何やってるのか知りたい！ っていう営業さんやデザイナーさん向けに 『HTML、CSS、JavaScriptの違いと役割について』ご紹介します。 　　Webサイトをつくりたいけど、HTMLって何なの？ 　　Web業界の営業をやり始めたけど、 　　Webサイトって実際どうやって作ってるの？ などなど。 『コーディング？何それ初めて聞いた！』く... --- ### 【WordPress】記事をランダムに表示させる方法！プラグイン不要！ - Published: 2017-03-07 - Modified: 2024-11-01 - URL: https://fastcoding.jp/blog/all/system/wordpress-random/ - カテゴリー: WordPress, システム開発 - タグ: php, WordPress FASTCODING-Vietnamのバックエンドエンジニア、ジアンです。 Webサイトを見ていて「ランダムに記事を読み込む」ページを見たことはありますか？ 具体的にはWebサイトを表示すると 最初はりんごに関する記事が1番上に表示されていたのに 同じページを更新してみたら、次はみかんに関する記事が1番上に来ている このようにページを再読み込みしたら、毎回違う記事が表示されるというものです。 この機能は投稿数が多いブログなどに適しています。 ページを更新すると毎回ランダムに違う記事が表示されるの... --- ### 初めてのSchema.org(スキーマ) - Published: 2017-03-02 - Modified: 2020-07-31 - URL: https://fastcoding.jp/blog/all/info/schema-org/ - カテゴリー: Web業界の動向・情報, フロントエンド - タグ: Web業界の動向, フロントエンド, 初心者 FASTCODINGの波乗りディレクター尾島です。 schema. org(スキーマ)とは？ 初めて聞いた、という方もいるのではないかと思います。 schema. org(スキーマ)とは 「検索エンジンに正確な情報を伝え、最適な検索結果を表示させる」 というひとつの仕様になります。 schema. orgの仕様通りにHTMLをマークアップしていく事で、 クローラーがページの内容を解析しやすくなり、 その結果として検索結果にリッチスニペットを表示する事ができます。 この、リッチスニペットとは検索結... --- ### JavaとJavaScriptの違いが簡単にわかる！初心者のためのWeb講座 - Published: 2017-02-24 - Modified: 2024-07-11 - URL: https://fastcoding.jp/blog/all/jquery/java-javascript/ - カテゴリー: jQuery, ディレクション - タグ: JavaScript, ディレクション, 初心者 どうも、ディレクターのせりなです。 IT・Web業界の新人さんがよく間違うあるあるに Java(ジャバ)とJavaScript(ジャバスクリプト)問題があります。 え？"Java"と"JavaScript"って違うものなの？ "JavaScript"を業界の人風にかっこよく言うと"Java"じゃないの？ そんな初心者さんや営業担当さんでも違いがわかるように "Java"と"JavaScript"がどんなものなのか簡単にまとめてみました！！ Java(ジャバ)とJavaScript(ジャバスクリプ... --- ### 【SEO対策】HTMLページをAMP対応化する詳しい方法と、本当にAMPで良いの？ - Published: 2017-02-22 - Modified: 2024-08-26 - URL: https://fastcoding.jp/blog/all/frontend/amporpwa/ - カテゴリー: フロントエンド - タグ: Web業界の動向, フロントエンド FASTCODINGの波乗りディレクター尾島です。 AMPとは、Accelerated Mobile Pagesの略で モバイル端末でホームページを高速表示するHTMLフレームワークであることは 前回の記事にてご紹介しましたが、今回は静的なHTMLページへの対応にフォーカスしてみます。 AMP対応のメリット・デメリット、導入する？ AMP対応のためのHTML記述方法 まず、AMPの仕様にあわせてHTMLを記述していきます。 タイトル ~~~~~~~~~ 普段HTMLを見慣れている方であれば、お気... --- ### AMP対応のメリット・デメリット、導入する？ - Published: 2017-02-16 - Modified: 2020-07-31 - URL: https://fastcoding.jp/blog/all/info/amp/ - カテゴリー: Web業界の動向・情報, フロントエンド - タグ: Web業界の動向, フロントエンド FASTCODINGの波乗りディレクター尾島です。AMPについて、最近導入を検討される方からのご相談を多く受ける様になってまいりました。おそらく、2016/10/21より日本のGoogleの検索結果にAMPが対応されることが要因のひとつと考えられます。そもそもAMPとは、Accelerated(加速する) Mobile Pages の略で、GoogleやTwitterほか複数のプラットフォームが共同で参加しているプロジェクトが構築した規格のことです。AMPってどんな仕組み？・静的なコンテンツのみ... --- ### WordPressの脆弱性対策！すぐにバージョンアップしていいの？更新方法・手順とは - Published: 2017-02-08 - Modified: 2024-08-26 - URL: https://fastcoding.jp/blog/all/wordpress/updating-of-wordpress/ - カテゴリー: WordPress - タグ: WordPress こんにちは、ディレクターのせりなです。 2017年2月1日(水)にWordPressのバージョン4. 7. 2が公開されましたね。 「WordPress 4. 7. 0～4. 7. 1で、REST APIの処理による脆弱性が存在している」との発表がありました。 この脆弱性が悪用されると、遠隔操作によってWordPressの投稿内容を改ざんされる可能性があるとのこと。 「すぐにWordPressを更新してください」と様々なところで言われますが ちょっと待ってください！！！ WordPressのバー... --- ### Webサイトの表示速度を改善する3つの方法！Google PageSpeed Insightsとは？～初心者編～ - Published: 2017-02-06 - Modified: 2025-03-13 - URL: https://fastcoding.jp/blog/all/seo/google-pagespeed/ - カテゴリー: SEO - タグ: SEO, フロントエンド, ユーザビリティ, 初心者 ※2019年6月25日追記 Google PageSpeed Insightsの問題点をレポートする、無料診断サービスを始めました 高得点が取れていないサイトをお持ちの方、是非お問い合わせください！ PageSpeed Insights対策 無料診断はこちらをクリック こんにちは、ディレクターのせりなです。 Googleが検索順位を決めるアルゴリズムの1つとして、ページの表示速度があります。 米Googleは2010年にページの表示速度も検索順位に影響することを発表し、2012年には日本でも検索... --- ### 【決定版】WordPressの引っ越し！サーバー移行・移転手順 - Published: 2017-01-31 - Modified: 2024-07-24 - URL: https://fastcoding.jp/blog/all/system/moving-wordpress/ - カテゴリー: WordPress, システム開発 - タグ: WordPress, 初心者 はじめに 　ファストコーディングのシステムディレクター、Mr. Kです。 　今回はWordPressサイトを別サーバーに設置する手順、及び設置先サーバーの確認事項について説明したいと思います。基本的にサーバーの知識、バックエンドの知識について明るくない初心者の方でも作業できるような説明となります。 WordPressの引っ越し前に確認しておくこと 動作環境について 　まずは設置先サーバーについて、WordPressが動作する環境かどうかを確認しましょう。 　サーバーによって確認方法は異なります。... --- ### Webサイトデザインの横幅サイズ！もう何pxか迷わない！ 2017年1月版 - Published: 2017-01-27 - Modified: 2024-08-07 - URL: https://fastcoding.jp/blog/all/webdesign/designswidth/ - カテゴリー: Webデザイン - タグ: デザイン, 初心者 2021年、最新のWebデザインの横幅サイズはこちらの記事をご覧下さい。 どうも、FASTCODINGディレクターのせりなです。 Webサイトを制作するとき、デザインの横幅を何pxにすればいいかなーって思ったことありませんか？ パソコンは何pxで作るの？スマートフォンは何pxがいいの？ って聞かれることが多いので、デザインの横幅でもう迷わないための考え方をまとめてみました。 基本的な考え方さえ抑えておけば、これから先いろいろな情報が出てきてもばっちりです！ もくじ 　　1. 「Webサイトデザイ... --- ### なぜJavaScriptを使う？その強みとは？ - Published: 2017-01-25 - Modified: 2020-07-31 - URL: https://fastcoding.jp/blog/all/frontend/whyjs/ - カテゴリー: フロントエンド - タグ: JavaScript, フロントエンド, 初心者 FASTCODINGの波乗りディレクター尾島です。ホームページを制作する上で、近年では欠かすことが出来なくなってきているのが JavaScriptの存在です。JavaScriptとはJavaScriptとは、数多あるプログラミング言語のひとつで、上手に利用する事でさまざまな機能やアニメーションなどを実装することができます。JavaScriptはコードなどがとてもシンプルで、基礎的な部分は他のプログラミング言語と同じところも多い為、入門しやすい言語ともいえます。他の言語と異なる点といえば、プログラ... --- ### コーディング指示書の書き方！Web制作の入稿前にディレクター・デザイナーが確認したい5つのこと - Published: 2017-01-12 - Modified: 2020-07-31 - URL: https://fastcoding.jp/blog/all/direction/codingspec/ - カテゴリー: ディレクション - タグ: コーディング, ディレクション, 制作準備, 指示書 おはようございます！ FASTCODINGディレクターのせりなです。 　　さあ！Webサイトを作ろう！！デザインはデザイナーさんに頼んだし、 　　コーディングはコーディング代行会社に依頼しようかな～ なんてとき、 コーディングのことがよくわからないディレクターやデザイナーのあなたは悩むはず 　　自分が作りたいサイトのこと、やりたいこと、 　　どうやってエンジニアに伝えればいいんだろう・・・ そんなときにエンジニアとディレクター・デザイナーさんの溝を埋めるのが「コーディング指示書(仕様書)」と呼ば... --- ### 絶対パス、相対パス、ルートパスの違いってなに？メリット・デメリットは？ - Published: 2017-01-06 - Modified: 2020-07-31 - URL: https://fastcoding.jp/blog/all/frontend/path/ - カテゴリー: フロントエンド - タグ: コーディング, フロントエンド, 初心者 FASTCODINGディレクターのせりなです。 今回はプログラミングを始めるとき、HTMLコーディング初心者が必ず引っかかる「絶対パス」「相対パス」「ルートパス」について勉強しましょう！ パスとは まず、「パス(path)」とは「道」のことです。 HTMLコーディングでは、ページをリンクさせたいときや、画像を表示したいときに使うので、「表示したい画像がどこにあるのか」の道順を書くのがパスの役割です 例えば、Webサイトのリンクを指定するとき、こんな書き方をしますよね。 リンク先の名前 この場合で... --- ### Webデザイナー必見！メインビジュアルのデザイン参考サイト！ - Published: 2016-12-27 - Modified: 2024-08-26 - URL: https://fastcoding.jp/blog/all/webdesign/mainvisual/ - カテゴリー: Webデザイン - タグ: デザイン, メインビジュアル, 参考 はじめまして。 ディレクター(兼デザイナー)のせりなです。 この度、FASTCODINGは技術ブログを書き始めることにしました！ FASTのスタッフは本当に個性派揃いで、興味のある分野も前職もバラバラ。そんなみんながそれぞれ記事を書いたら・・・面白そうじゃない？ってことに。 例えば ・心は日本人、体はフランス人のjsエンジニア ・平日はプロジェクトの波にもまれ、休日は海で波にもまれてるサーファー ・女優 兼 Webディレクターという、異色の兼業をこなすFASTのスーパールーキー こんな感じで、人... --- ### HTML5で効果的な動画演出!！？ - Published: 2015-03-12 - Modified: 2024-07-24 - URL: https://fastcoding.jp/blog/all/jquery/html5move/ - カテゴリー: jQuery 自分が知らなかったものをメモとして残します。 H2MD. jsは、パソコン・スマホのブラウザで再生できるソフトウェアムービーコーデックととのこと。 jpegやpngファイルを利用してCanvasへ合成して動画を再生します。 jpegの連番ファイルであるMotionjpegに比べ、ファイルサイズの大幅な削減を実現しました。 また、重ね合わせの動画再生や、透過レイヤであるアルファチャンネルも利用可能です。 有償のライセンスなので費用がかかるみたいですね！ ブラウザも最新のみ！ html5でもアプリや... --- ### 4月21日までにスマホ対応しないとマズイ！？ - Published: 2015-03-04 - Modified: 2020-01-05 - URL: https://fastcoding.jp/blog/all/info/0421spsite/ - カテゴリー: SEO, Web業界の動向・情報, フロントエンド - タグ: HTML, SEO, Web業界の動向 皆様このニュースはご存知の方が多いかと思います！ 4月21日までにスマホ対応しないとGoogleアルゴリズム変更で順位が落ちるということをGoogleが発表いたしましたね！ 下記がgoogleより出ている参照サイトです。 http://googlewebmastercentral-ja. blogspot. jp/2015/02/finding-more-mobile-friendly-search. html 結論的にはスマホサイトを用意した方がいい！？と私は解釈しております。 皆様のサイトに... --- ### ベトナムオフィス移転のお知らせ - Published: 2015-03-02 - Modified: 2020-01-05 - URL: https://fastcoding.jp/blog/all/other/%e3%83%99%e3%83%88%e3%83%8a%e3%83%a0%e3%82%aa%e3%83%95%e3%82%a3%e3%82%b9%e7%a7%bb%e8%bb%a2%e3%81%ae%e3%81%8a%e7%9f%a5%e3%82%89%e3%81%9b/ - カテゴリー: その他 ３月１日よりベトナムオフィスを下記の場所へ移転いたしました。 56 Van Coi Street, Ward 7, Tan Binh District, Ho Chi Minh City, Vietnam これも皆様にFASTCODINGをご利用いただいたおかげございます。 ありがとうございます！ 以前よりオフィスが広くなり、また新築ビルのため、彼らはとても喜んでいます！ 私は以前より空港から近いため私はとても行きやすくなりました！ 今後もFASTCODINGをよろしくお願い致します！ --- ### コーディング外注の仕方はどうやるの？ポイントは○個？ - Published: 2015-02-09 - Modified: 2020-01-05 - URL: https://fastcoding.jp/blog/all/direction/coding_point/ - カテゴリー: ディレクション - タグ: HTML, ディレクション, 制作準備 こんにちは！ 最近はクライアント様のところへの訪問、新規のお客様との商談と大変嬉しいことにお客様の顔を見れる機会を多くいただいております！ そんな中、よくご質問でいただくのは 【コーディング外注の仕方について教えてください！？】 とお話をいただきます！ 弊社は隠すことは何もないので、何でも伝えてしまっています。。笑 ご覧頂いた方にとって参考になればと思います。 コーディングを外注する際のポイントは５点です！ 1. テキスト ーテキストで書いてある文字について２つ目の画像の指示と被りますが、fon... --- ### RSS取得はどう行うのか？ - Published: 2015-01-19 - Modified: 2020-01-05 - URL: https://fastcoding.jp/blog/all/frontend/rss-get/ - カテゴリー: フロントエンド 先日ページ内にgoogleのapiを使ってtopページのニュース情報やブログ情報をRSS取得について行いました。 作業としてしていないと忘れてしまうので自分のメモとして残します。 下記のスクリプト入れます。 あとはコード及びクラス名の修正を行えば問題なく表示がされるはず！ --- ### AUTOCODINGリリース - Published: 2015-01-16 - Modified: 2025-03-31 - URL: https://fastcoding.jp/blog/all/info/autocoding%e3%83%aa%e3%83%aa%e3%83%bc%e3%82%b9/ - カテゴリー: Web業界の動向・情報 FASTCODINGではないのですが、 表題の通り、AUTOCODINGをリリースいたしました！ URL: http://autocoding. jp/ AUTOCODINGは、コンピュータがWebデザインデータを解析し、HTMLコーディングを自動生成するASPサービスです。 今まではフロントエンジニアやマークアップエンジニアと言われるコーダーが手作業で行っていた作業の４つの工程を「HTML構造設計」「画像スライス」「HTML、CSSのコーディング」「品質チェック」を、コンピュータが自動で処理す... --- ### 画像容量軽減ツール２つの紹介 - Published: 2014-09-02 - Modified: 2024-10-29 - URL: https://fastcoding.jp/blog/all/frontend/reduction/ - カテゴリー: フロントエンド, 便利サービス - タグ: フロントエンド 週に１回は更新をしようと思っていたのですが、１ヶ月の期間が空いてしまいました。。。 気持ちを改めて週１回の更新はしようと考えています！ この１ヶ月は様々なクライアント様からご利用を頂き、多忙な日々を過ごしておりました。 いくつかのクライアント様には納期が合わずお断りをしたりしてしまい、大変申し訳なかったなと思っております。 受け入れ態勢を少しづつ増やしていき、クライアント様に喜ばれるよう頑張っていきます。 さて、久しぶりのブログの本題に入りたいと思います。 seoを考えた上では、表示スピードを改... --- ### webでhtmlを学ぶ（codeprep） - Published: 2014-07-07 - Modified: 2020-01-05 - URL: https://fastcoding.jp/blog/all/frontend/codeprep/ - カテゴリー: フロントエンド - タグ: CSS, HTML, JavaScript, フロントエンド, 初心者 現在はweb上で勉強ができるという良い時代になってきましたね。 情報が多すぎて何から手を付けていいやらと困ってしまうこともあるかと思います。 そこで本日はwebで勉強できるツール１つご紹介いたします。 cordprep(コードプレップ)です。 http://codeprep. jp/ こちらは会員登録すれば無料で言語を学ぶことができます。 はじめてのシリーズとして html,css,javascript,ruby,phpなどがあります。 基礎のベースを学ぶには良いのではないかと思います。 こちら... --- ### よく使うhtmlタグの振り返り7つ - Published: 2014-06-30 - Modified: 2020-01-05 - URL: https://fastcoding.jp/blog/all/frontend/htmltag/ - カテゴリー: フロントエンド - タグ: HTML, SEO, 初心者 今回はSEOに強いタグの設定、第3段の紹介です。 前回の記事では「Titleタグ・metaタグの設定のポイントは11点」 前々回の記事では「altタグの設定のポイントは3点」 についてBlogを更新いたしました。 今回はhtmlタグでよく使う構造についてご紹介をいたします。 ご存知の内容の方も多くいると思いますが、 私が資料を作成する上で整理する為にブログにも記述しようと思い 本編では書かせて頂きます。 以前のマークアップする際はタグを使ってそれぞれのブロック（箱）を作成し、 わかりやすいように... --- ### Titleタグ・metaタグの設定のポイントは11点 - Published: 2014-06-26 - Modified: 2020-01-05 - URL: https://fastcoding.jp/blog/all/frontend/tagpoint/ - カテゴリー: SEO, フロントエンド - タグ: HTML, SEO, フロントエンド, 初心者 FASTCODINGのBLOGをご覧頂きありがとうございます。 日本がワールドカップで予選敗退という結果に終わり昨日はブルーな気持ちで仕事をしてしまいました。 個人的には奇跡を信じて応援をしていた分反動がでかかったです。 日本代表も次のワールドカップへ向け気持ちを新たに頑張って頂きたいです！ さて冒頭ではちまちまとワールドカップの鬱憤を書いてしまいましたが、 今回は前回に続いてSEOに関する記述をしっかりと行なえば、順位が上がることについてご紹介をいたします。 今回も3点の記述方法をご紹介を致し... --- ### altタグの設定のポイントは3点 - Published: 2014-06-23 - Modified: 2020-01-05 - URL: https://fastcoding.jp/blog/all/frontend/alttag/ - カテゴリー: SEO, フロントエンド - タグ: HTML, SEO FASTCODINGブログをご覧頂き、ありがとうございます。 本日は表題通りaltタグの設定についてFASTCODINGでどのように設定しているか記述をいたします。 altタグについては基本設定をしなければならないと考えております。 前後の記述した文章及び全体のサイト構成から何を入れければならないのか？を考えて入力をいたします。 こちらの○○○に何を設定すべきかを少し考えて見ましょう。 弊社のお客様の声ページにある有限会社C&Sデザインの今井様のお客様について例として紹介をさせていただきます。 ... --- ### Bookmark登録しているサイトデザイン集12サイトの紹介 - Published: 2014-06-09 - Modified: 2020-01-05 - URL: https://fastcoding.jp/blog/all/info/bookmark/ - カテゴリー: Web業界の動向・情報 私がWebサイトやコーディングを参考にする際にBookmark登録していたまとめサイトの紹介をいたします。 サイトを検索するとまとめサイトがいくもあるため、用途によって使い分けが必要ですね。 FASTCODINGではコーディングをメインに行なっていますが、こちらの12サイトのまとめはワイヤーフレームやデザイン、コンセプトを作る際にも参考になります。 知らないサイトがある方は一度訪問してみて是非参考にしてください。 1. イケサイ http://www. ikesai. com/ Webサイトのカ... --- ### HTMLコーディングとは - Published: 2014-06-02 - Modified: 2020-01-05 - URL: https://fastcoding.jp/blog/all/info/coding/ - カテゴリー: Web業界の動向・情報 HTMLコーディングについてWeb業界で働いている方であれば、概ねの人は分かると思いますが、生活していく上では中々馴染みのないものですね。 私は最初の頃全く意味が分からず目が点になっていました。 ソースコードを見てもよくわからないですからね。 HTMLコーディングはサイトを作る上で重要な要素です。 コーディングができれば、あーなっているのねってわかりますからね。 そうなる為にまず私が行なったことについて少しご紹介します。 １．タグの意味や使い方を理解する サイトを構成する上でタグがいくつもありま... --- ### コーディング請負体制 - Published: 2014-05-29 - Modified: 2020-01-05 - URL: https://fastcoding.jp/blog/all/info/project/ - カテゴリー: Web業界の動向・情報 FASTCODINGのコーディング請負体制についてご紹介いたします。 現在の請負の流れのフローといたしまして、下記の通りとなります。 1. クライアント様からデザインデータ、コーディング指示書の送付 2. クライアント様とデザインデータとコーディング指示書の確認 3. 問題がないようでしたら、発注書の送付 4. 発注書にご記入いただき返信 5. 発注書を確認後、コーディング作業開始 6. 頂いたデザインデータ、コーディング指示書を基に英語版コーディング指示書の作成 7. 英語版コーディング指示書... --- ### オフショアコーディング - Published: 2014-05-27 - Modified: 2020-01-05 - URL: https://fastcoding.jp/blog/all/info/offshore/ - カテゴリー: Web業界の動向・情報 FASTCODINGは、ベトナム人のコーダーを採用してオフショアでコーディングサービスを提供しております。 FASTCODINGサービスを展開する前に、運営元である株式会社プレートにてベトナム人のコーダーと接点があったため、 サービス展開を開始することを念頭に置き、接していきました。 ポイントしては2点あります。 1. コーディングの品質 日本ではなく海外でコーディングを行うことを考えると、「品質」の課題が良く出てくるキーワードです。 「品質」の壁をクリアすることができるならば、日本人じゃなく、... --- ### ご挨拶 - Published: 2014-05-20 - Modified: 2020-01-05 - URL: https://fastcoding.jp/blog/all/info/greeting/ - カテゴリー: Web業界の動向・情報 皆さんこんにちは！FASTCODINGのディレクターの河田です。 今回FASTCODINGでBLOGを始めましたので、まずはご挨拶をさせていただきます！ FASTCODINGは４月から始めましたコーディング専門サービスです。 このBLOGを読んで下さっている皆様も、おそらく一度はご経験があるかと思いますが、「せっかくたくさんの案件があるのにリソースが足りなくて納期に間に合いそうもない！ピンチ！」といった状況に最適なサービスとなっております。 FASTCODINGは皆様からデザインデータとコーディ... ---