パララックスもこれで簡単に！ HTMLやCSSを変更せずにシンプルに実装できるスクリプト -simpleParallax.js
ユーザーのスクロール操作に合わせて視差効果を与えるパララックスのエフェクトをシンプルに実装できる軽量のバニラJavaScriptのライブラリを紹介します。 実装は非常に簡単で、HTMLやCSSを変更せずに、パララックスのさまざまなエフェクトを実装できます。 simpleParallax.js simpleParallax.js -GitHub simpleParallax.jsの特徴 simpleParallax.jsのデモ simpleParallax.jsの使い方 simpleParallax.jsの特徴 simpleParallax.jsは、<img>で実装された画像にパララックスアニメーションを追加する、非常にシンプルで軽量なバニラJavaScriptのライブラリです。
わずかな時間で驚くほどWeb制作がはかどる最新オンラインツール43個まとめ
この記事では、Webデザイン制作を楽にする最新オンラインツール43個をまとめてご紹介します。 コピペで利用できるお手軽CSSツールやSVGツール、コード知識不要のノーコードツール、色に困ったときに便利な配色ツールなど、クリエイティブな案件で活用したい新しいツールを揃えています。 自分のワークフローにうまくツールを導入することで、制作時間の短縮につながるだけでなく、ストレス少なく作業を行うことができます。 カテゴリごとに整理しているので、目的にあったお気に入りツールを探してみましょう。 コンテンツ目次 1. Web制作便利ツール 2. 配色ツール 3. デザインコレクション 4. プロトタイプ、アイコンツール 5. コラボ、リモートワークツール 6. 面白、クリエイティブツール Web制作の効率、生産性アップ！話題の最新オンラインツールまとめ Web制作便利ツール Layout Patter
6割のユーザーがECサイトが重くて離脱。我慢できる秒数は？ – Fastask調べ｜モバイルマーケティング研究所｜ModuleApps 2.0
ジャストシステム「Marketing Research Camp」はネットリサーチサービス「Fastask」を利用して、事前の調査で、17歳〜68歳の男女1,054名を対象に『Eコマース＆アプリコマース月次定点調査 （2019年1月度）』を発表しました。 ６割がスマートフォンアプリを利用 スマートフォンでeコマースをする方に「あなたが最も利用するものはどちらか」尋ねました。スマートフォンのアプリが68.3％、スマートフォンのサイトが31.7％となりました。コロナ禍においてアクセスはぐんと伸びた状況になりました。 最も商品購入に繋がっているSNSはLINE 「あなたがECサイト（アプリ）からの通知で受け取っているもので最も商品購入に繋がっているSNS」について尋ねました。LINEが40.2％、Twitterが28.2％、インスタグラムが17.1％、Facebookが6.0％となりました。月間
界隈がざわつくほど超進化したPMBOK第7版の解説【プロジェクトマネジメント】｜Miz Kushida
・・・ ・不確実性パフォーマンス・ドメインについて加筆しました ・テーラリングについて加筆しました ・適応課題について補足を追加しました。 はじめにPMBOKといえば、PMIが世界中のプロマネの実務家から意見を集めてプロジェクトマネジメントについて知識体系化している分厚い本、というイメージです。 いや、でした。。。以前の第6版までは（7版からはすごく薄い）。 2021年8月に第7版が発表されると（ただし、日本語版はもっと先）公式からアナウンスがありましたが、本家サイトに行ってみると英語版は既に購入できる状態でしたので早速電子版を購入し読みましたので解説したいと思います。 一応前置きしておきますと、僕はPMPホルダーではありません。外資系にいるときにPMBOKをベースとしたプロジェクトマネジメントを実施したり、国内企業ではCMMI レベル5（最高レベル）を運用したりバージョンアップ対応を経験
デザインに活かせるフレームワーク20｜金 成奎
久しぶりのnote投稿です。今回は自分の勉強がてら、UX・情報設計・アジャイル開発など、デザインに関わる様々な局面で知っておくと役立つフレームワークを集めてみました。 有名なものからデザイン以外にも使えそうなものまで幅広く選んでいますので、気になるものがあれば改めて実作業に生かすなり、掘り下げて研究するなり、資料に生かすなりしてもらえると良いのではないかと思います。 （ちなみにここでいう「フレームワーク」とは共通して用いることのできる考え方や思考の型や枠のようなもので、いわゆるCSSフレームワークの類ではありませんので、その点ご了承ください） 1.UXの5段階モデル まずは有名なUXの5段階モデル。アメリカのUXデザイナーであるJesse James Garrett 氏が著書『Elements of User Experience（ウェブ戦略としての「ユーザーエクスペリエンス」）』にて提唱
なんか最近のWebサイトが見辛い
俺は下記のような見やすいサイトがいいのに最近全く見なくて困っている。 ・線が黒ではなくグレーにしているので境界が分かりにくい ・背景がよく分からん画像の繰り返しとかだったころと比べてじっくり読め過ぎて見辛い ・あるいは背景が真っ黒に文字が白のシンプルなサイトが減って見辛い ・フレームが無くなってメニューが分かりにくい ・動く文字とか何か驚いたことがあるとき文字のサイズを大きく書いてあるサイトが無いのでインパクトが無い ・そもそも虹色に輝く文字とかがない ・いきなりBGMが鳴りだしたりしないので面白くない ・アクセスカウンターがなくキリ番ゲット用の報告欄が無い ・掲示板やチャットが無い。掲示板の謎の外国人が書いた英語が見たいのに見れなくなってつまらない ・日記が無い。3日分で途絶えているホラー満載な日記が読みたいのにない ・(工事中)となっている表示が無い ・プロフィールとかなく、性別も年齢
Webサイト制作をどれくらいの粒度で分解してタスク化するか｜重松佑 / Shhh inc.
プロジェクトが始まるときにかなり初期の段階でWBSを作ることは多いとおもいます。そのWBSの作成、プロマネやディレクターに任せっぱなしになっていないでしょうか。WBSはスケジュールをガントチャートで表したものを指していると思われがちですが、実はスケジュールだけでなく見積もりやアサインを精度高く行うためにも重要なものです。 たとえば「Webデザイン作成」というスコープにどのような実作業が含まれているかはWBSを作ることによって見える化しプロジェクトメンバーやクライアントと共有できるようになります。ときどき下記のように書かれたWBSを見ることがあります。 Webデザイン作成 ・作成 ・確認 ・修正 ・確認2 ・修正2 ・確定 しかし、これでは「Webデザイン作成」に必要な知識、さらには作業量・スケジュール・予算も分かりません。Webデザイン作成の例を続けると、下記のように「作成」のスコープを分
どうしてHTML5が廃止されたのか | フューチャー技術ブログ
フロントエンド連載の5記事目です。 HTML5が2021年の1月に廃止されました。 Webエンジニアとしてバリバリ活躍されてる方やエグゼクティブテックリードのような肩書きを持つ方にとっては「何をいまさら」という話題かと思います。 しかしながら、今年も新人さん入ってきてくださったので、プログラミングを学習中にHTML5という文字列に悩まされないように、そもそもHTML5とは何かや、廃止された経緯をまとめてみます。 HTML5とはWebサイトを作るときに必ず書くことになるHTML。Webサイトのコンテンツ、つまり中身や構造を作るために使うマークアップ言語です。 そして、その最近版として10年ほど前に登場したHTML5。当時は Webニュースなどで盛んに特集が組まれていましたが、このHTML5がついこないだ、2021年1月28日に廃止されました。 広義のHTML5 / 狭義のHTML5HTML5
Web制作が捗るChrome拡張機能12選 – おすすめの拡張機能を集めてみた | Pulp Note
Chrome拡張機能にはWeb制作に便利なものが多く、私もよく利用しています。特に1〜2クリックでさっとチェックできるものは頻繁に使い制作の中で馴染んだものであるため、これらがないと手間どってしまうくらい依存性の高いものばかり。今回は私がよく利用しているChrome拡張機能を12個紹介します。初見のものがありましたら、ぜひ試してみてください。 Eagle – 効率的に画像を保存する Eagle サイト上にある画像をドラッグ＆ドロップだけで保存できるChrome拡張機能。あとで見返したい画像を効率的に保存できるのは嬉しい。ページ全体のスクリーンショットの撮影も可能。撮影後は専用のアプリに保存されます。この手のものは他にもあったのですがサービス終了してしまい、他を探してようやく見つけたのがEagleでした。重宝しています。 Eagle – 効率的に画像を保存する 専用アプリのダウンロードはこち
未経験から1ヶ月でWeb系企業に就職する勉強法
取り上げた技術は、本格的な開発でも役に立つもので、最も学習コストが低いものを選んだ。 重要度が低いものは載せていない。たとえばHTMLとCSSなんてググりながら書けば全く問題ない。Bootstrapなどのフレームワークも全くやる必要はなく、仮に就職先で使っていたら覚えればいい。 逆に言えば以下に挙げる技術は、そもそも概念自体がプログラミングにとって普遍的なものであり、（基礎的な部分を）調べながら使うようではエンジニア失格ということ。 基本的に現在では、バックエンド・フロントエンド・運用保守全てができないエンジニアに価値は無い。 以下に挙げた技術（①⑤⑥は他の言語やフレームワークで代替可能）が身に付いていなければまともな企業に就職することは難しい（もちろん、下らない業務システムを下請けで作ってる底辺企業には入れるだろうが）。 経験者でも、これらができない/わからないのは、相当恥ずかしいことだ
あなたのWeb制作をサポートしてくれるWebツール13選 | BUILD Journal
あなたのWeb制作をサポートしてくれるWebツール13選Update2023.05.24Release2023.04.28Tools HatenaにシェアするTwitterにツイートするPocketにストックするFeedlyに登録する Web制作をサポートしてくれるツールを10個紹介します。mix-blend-modeやgridレイアウト、transformなどのコードの他にもフォントチェックや背景画像を作成できるツール、VSCodeのテーマ作成ツールもあります。あなたのWeb制作を快適に進めるためにチェックしてみてください。 Fuze – CSS Gradient AnimatorFuzeグラデーションアニメーションのCSSジェネレーター。色を複数指定するだけでCSSアニメーション用のコードを作成してくれます。背景色やテキストカラーなどに使えます。 ちなみに、テキストカラーは当サイトのト
予算の少ないWebサイト制作は失敗する？Webサイト制作の実態調査 ｜WACUL TECHNOLOGY & MARKETING LAB | 株式会社WACUL
Webサイトの新規立ち上げ・リニューアルは、そのほとんどがコンバージョン数の増加や企業/サービスイメージの向上などを目的に実施される。今回は、アンケート調査によってWebサイト制作で成果を出している“発注者”の共通点を探った。
全部まとめられていて便利！iPhone, iPadなど、Appleデバイスのスクリーンサイズ・解像度のまとめ -Screen Sizes
Webサイト制作者・スマホアプリ開発者向け、Appleデバイスのスクリーンサイズ、各サイズを採用しているモデル、解像度、PPI、表示タイプ、比率、最後にサポートされたOS、セーフエリア、サイズクラス、ウィジェットのサイズ情報など、実装時に役立つ情報がまとめられたScreen Sizesを紹介します。 先週ローンチされたばかりのサイトで、2021年最新モデルのiPad Proから、2007年のiPhoneまで、最新機種から初代までのデバイスのサイズが網羅されています。 Screen Sizes サイトを利用するのは簡単、登録など面倒なことは一切不要です。 サイドバーからデバイスを選択し、スクリーンサイズあるいはモデルを選択します。 私が使用しているiPhone 12 Proを見てみました。 サイトはキーボードショートカットも用意されており、shiftキーを押すとショートカットの一覧が表示・非
Web制作の現場で使えるWebサービス13選！無料で使えるサービスを集めてみた | BUILD Journal
CSSコーディングに役立つサービスやWebサイト運用で役立つSEO関連のツールなど、Web制作の現場で使えるWebサービスを13個紹介します。ワンクリックで取得できるコードや、ドラッグ&ドロップだけで完結するものなど、直感的に作業できるサービスばかりです。あなたの現場でもぜひ利用してみてください。 Fancy Border Radius Generator CSSのborder-radius を使ってボックスや画像をユニークな形状に変化できるWebサービス。 Fancy Border Radius Generator シンプルなコードで実装可能です。 正方形の写真をCSSで変形させました 上のように正方形の写真をユニークな画像に見せることができます。 Fancy Border Radius Generator Clippy – CSS clip-path maker CSSのclip-pa
Googleのエンジニアが「ウェブサイトの画像読み込み」を最適化する方法を解説
ウェブサイトを閲覧していると「画像の読み込みが遅い」という場面に遭遇したことがある人は多いはず。画像はウェブサイトのパフォーマンスを左右する要素のひとつであり、ウェブ開発において取り扱いに注意すべきものです。そんな画像をウェブサイトで扱う際の最適化方法について、GoogleのエンジニアであるMalte Ubl氏が解説しています。 Maximally optimizing image loading for the web in 2021 https://www.industrialempathy.com/posts/image-optimizations/ ◆img要素にwidthとheightを指定する アスペクト比を維持したまま画像サイズを変更するには、「style」要素に「max-width: 100%」や「height: auto」と指定しておく手法がよく用いられます。この手法に加
最新の手法でブラウザのタブに表示される「Favicon(ファビコン)」を作成するとこうなる
ブラウザのタブやブックマークに表示される「Favicon(ファビコン)」は、ウェブサイトを印象づける重要な要素です。そんなファビコンを作成しウェブサイトに表示させる最新の方法について、フロントエンドエンジニアのAndrey Sitnik氏が解説しています。 How to Favicon in 2021: Six files that fit most needs — Martian Chronicles, Evil Martians’ team blog https://evilmartians.com/chronicles/how-to-favicon-in-2021-six-files-that-fit-most-needs ファビコンは2000年代初頭に生まれたコンセプトで、インターネットに公開するウェブサイトはファビコンを備えているべきだとSitnik氏は主張。しかし、ウェブサイト
Web制作の時短に！2020年の便利オンラインツール・ベスト100選
この記事では、2020年に公開された便利なWebオンラインツール・ベスト100個をまとめてご紹介します。 定期的にリストアップしている最新オンラインツールまとめ記事では、2020年にかけて合計306個の新しいツールやサービスが登場しました。 その中でも、特にWebデザイン制作に便利なツールを選りすぐったコレクションで、「無料で利用できるツール」を揃えています。 これらのツールやサービスを活用すれば、Webデザイン制作をより快適に進めることができるでしょう。 カテゴリごとに整理しているので、目的にあったお気に入りツールを探してみましょう。 コンテンツ目次 1. CSSツール（14個） 2. パターンツール（7個） 3. イラスト系ツール（3個） 4. デザインツール（10個） 5. 配色カラーツール（6個） 6. グラデーションツール（3個） 7. SVGツール（8個） 8. スクリーンショ
Web 技術の調査方法 | blog.jxck.io
Intro 「新しい API などを、どうやって調べているのか」「仕様などを調べる際に、どこから手をつければ良いのか」などといった質問をもらうことがある。 確かにどこかに明文化されていると言うよりは、普段からやっていて、ある程度慣れてきているだけなものであり、自分としても明文化していなかったため、これを機に解説してみる。 やり方は一つではない上に日々変わっていくだろうが、頻繁にこの記事を更新するつもりはない。また、筆者は実務で必要になるというよりは、ほとんどを趣味でやっているため、このやり方が合わない場面は多々有るだろう。 スコープとしては、ライブラリ、ツール、フレームワークなどではなく、 Web プラットフォーム関連の標準やブラウザの実装状況などに限定している。 Scope 従来からあり、広く認知された API については、情報も多く調査の敷居はそこまで高くないため、今回は議論が始まって
見積書の作り方・考え方（僕たちの場合）｜岡村 旭 Webディレクター＆エンジニア / foot llc.
鳥取県鳥取市で主にホームページの制作を行っている合同会社フットでWebディレクター兼エンジニアをしている岡村といいます。 このnoteは先日、各地でWebディレクターをされている方々と「Web制作の見積り」というテーマでZoomを使用した情報交換会を行った際に自身がカンペとしてまとめたものをnote用に加筆修正したものです。 情報交換会の実施後にTwitterで「こんなお話しましたー」とつぶやいたところ、普段あまり「いいね」がつかない僕のアカウントにしては結構反応を頂きました。 情報交換会でも「他の人の見積書の作り方を知る機会がないので新鮮だった！」「発見があった！」という声が挙がり、僕自身も新しい気付きがあったので、こういった情報を共有すると参考になる方がいるかも。ということで、非常にざっくりとしていますがまとめてみました。 タイトルにあるように、あくまでも僕たち（合同会社フット）の場合
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Web制作案件炎上！要注意！フリーランスでWeb制作案件を受託するうえで、依頼を断るべき「モンスタークライアント」の特徴｜山崎レモンサワー