ウェブ制作で React(Next) や Vue(Nuxt)、jQuery が最近どれぐらい使われているのか調べてみた - feb19
ウェブ制作で React(Next) や Vue(Nuxt)、jQuery が最近どれぐらい使われているのか調べてみたdate2022.9.4(Sun.)tagsweb developmentFrontendJavaScript ウェブアプリケーション開発で React や Vue を使うのはよくある話かなと思うのですが、マーケティングや広報活動など広告クリエイティブ系のウェブサイト制作ではどれぐらい使われているのかなと思い、暇つぶしにリサーチしてみました。 調査方法母集団ウェブギャラリーサイトをいくつか見て比較的国内系のセレクトが多そうな https://io3000.com/ さんから 2022 年に紹介されている 175 件と、ウェブサイトのアワードサイトとして有名な https://www.awwwards.com/websites/ さんで 2022.8 以降に Winner と
【CSS】CSSだけで作るアコーディオンメニュー | WEBDESIGNDAY
レスポンシブレイアウトでのスマホビューが圧倒的に増えて来た昨今、アコーディオンメニューは、狭い画面でユーザーが必要な情報を任意で表示することができ、ユーザビリティの観点から見ても重要なテクニックの1つです。 ということで、今回はjQueryなしでCSSだけで作るアコーディオンメニューをやっていきたいと思います。 今更、説明も不要かと思いますが一応確認しておきましょう。下にある通り、クリックで開閉ができるメニューのことです。 クリックで開く1hello.world!クリックで開く2hello.world!クリックで開く3hello.world!クリックで開く4hello.world! 基本的なやり方 どうやって実装するかを簡単に説明します。 labelをクリックする アコーディオンメニューのクリック部分になります。 labelクリックでチェックボックスにチェックを付けたり外したりする チェッ
デザイナーじゃなくても知っておきたい色と配色の基本 | knowledge / baigie
色は私たちの身近に存在する視覚要素であり、日々の生活や行動に多大な影響を与えています。しかし、美術やデザインの専門教育を受けない限り、これほど身近な色を体系的に学ぶ機会はほとんどありません。 近年、ビジネスの現場でもデザインの重要性がよく語られます。ビジネスレイヤーで語られるデザインは課題解決を意味する広義のデザインであることも多いですが、その概念がプロダクトに落ちる段階では、ビジュアルデザインのような狭義のデザインも考えていかなくてはなりません。自分自身がデザイナーではなくとも、デザインを評価・判断すべき立場になることも、当然あるでしょう。 デザイナーでなくても、仕事の中で色を扱うシーンは他にもあります。PowerPoint等を使ってビジネス文書を作成をするとき、誰もが色を用いるでしょう。色の知識があれば、より効果的なドキュメント作成が可能になります。 このように考えると、色はデザイナー
成功法則が詰まったBtoBサイトの標準ワイヤーフレームを無料配布します | knowledge / baigie
約1年前、BtoB企業における顧客獲得型サイトの勝ちパターンをまとめた『BtoBサイト・チェックリスト』を、ベイジ、才流さん、WACULさんの3社連名で発表し、大きな反響をいただきました。 このチェックリストはブログで公開しただけではなく、私たちのウェブ制作の現場でもフル活用されています。この1年間に手掛けた多くのBtoBサイトが、このチェックリストを満たすように設計され、多くのBtoBサイトでコンバージョン数/率やフォーム誘導数/率の向上など、ポジティブな変化が生まれました。 このような活動の中から、『BtoBサイト・チェックリスト』の内容を満たした『BtoBサイト・ワイヤーフレーム』なるものが誕生しました。これを今回、皆さんにご提供します。リード情報なども一切取らず、そのまま丸ごとお渡しします。 BtoBサイト標準ワイヤーフレームXD版（770KB） BtoBサイト標準ワイヤーフレーム
Webサイト制作プロジェクトにおける、130の工程別チェックリスト – BtoB企業向け | メソッド | 才流
製品サイトやコーポレートサイトを制作するプロジェクトにおいて、手戻りなく進行するための事前チェックリストを作成しました。 特にWebサイトの規模が大きくなると関係者が増え、プロジェクト進行の難易度は上がります。しかし、各工程でどういう点をチェックすべきかがあらかじめ明確になっていれば、Webサイト制作・リニューアルプロジェクトの成功率を上げることができます。 Webサイト制作プロジェクトを発注するBtoB企業の経営者・マーケターの方の参考になれば幸いです。 Webサイト制作プロジェクトにおける、130の工程別チェックシート（Excel） ※個人情報無しでダウンロードできます。 Webサイト制作の戦略立案に関わるチェックリスト まずはサイトをつくる前の戦略立案に関わるチェックリストです。 目標設定やターゲットの明確化、集客経路の設計やコンテンツ作成のリソース確保など、時間はかか
もし、HTMLのテキスト周りでデザイナーからこんなお願いをされたら... - Qiita
HTMLのテキストはPhotoshopのように融通が効かないから、デザイナーからの細かいお願いはだいたい断っている...なんてことありませんか？ モダンブラウザは色んなプロパティが対応してきているので、できることも増えています。 今回は、知っているといざというとき便利なテキスト周りのCSSを集めてみました。 「日本語、文字詰めできないかな？ほら、このカタカナとかキモい。。」 「Webで文字詰めだと？無理なんだよあきらめな！」なんていう時代はもうとうに過ぎ去っています。OpenTypeのフォントであれば、日本語でもちゃんと文字詰めできるんです。 .class { -moz-font-feature-settings: "palt"; -webkit-font-feature-settings: "palt"; font-feature-settings: "palt"; } ↓こんなかんじで
【保存版】Google Search Console（サーチコンソール）を使って、サイトを改善するためのガイド ｜SEO Japan by アイオイクスSEO Japan｜アイオイクスのSEO・CV改善・Webサイト集客情報ブログ
ニール・パテル氏によるサーチコンソールを使いこなすためのマニュアルとなります。 昨年ご紹介させていただいた同氏のサーチコンソールに関する記事と比べ、より「出来ることベース」でのアプローチとなっており、また各項目をさらに深堀りしているという点で異なった観点の内容となっております。昨年の記事をご覧いただいた方でも、復習にお役立ていただける内容となっております。– SEO Japan サイトのコンバージョンとリードを最適化することは、ビジネスにおける最高の投資のうちの一つだ。 滞りなく運営され、コンバージョンを生み出すウェブサイトは、いざと言うときビジネスの助けになる。 しかしこれは簡単ではない。コンバージョンは勝手に生じるわけではないのだ。 ありがたいことにGoogleは、サイトが欠いている、あるいは苦労していることに取り組む助けとなる無料のツールを用意している。 例えば、Googleのサーチ
よこ並びのCSS
スマホサイトが優勢な昨今、要素をよこ並びにする機会は減ってきているのかもしれないけれど、大きい画面で見るサイトでは、ナビゲーションやタブや、商品一覧など、よこ並びにレイアウトする機会はまだまだあるんじゃないでしょうか。そんな「よこ並びにするためのCSS」も、やり方はさまざま。お馴染みのやつから、新参者まで、順番に見ていくことにします:)。 よこ並び？ そう、よこ並び。 例えばボタンを横一列に並べたり。商品の情報なんかだと、横に3つずつ並べて改行して、多段に並べる場合もありますね。偏（ひとえ）に「よこ並び」と言えど、CSSにはそのやり方がたくさんあるんです:o。 導入 この記事で紹介するよこ並びの方法は以下の通り。 CSSの歴史的な背景から、最初はfloatプロパティを使った方法を紹介します。 float（フロート） 要素を左右へ寄せるためのプロパティ。 後続する文章（テキスト）などのインラ
第3回 携帯サイトの文字コードに気をつける | gihyo.jp
上記はキャリアが対応を発表している文字エンコードであり、機種によっては公式に発表している文字エンコード以外にも対応している場合もあります。上記の表から、携帯サイトで共通に使える文字エンコードは「Shift_JIS」であることがわかります。このことから携帯サイトでは基本的に「Shift_JIS」を使って画面の入出力を行うことになります。ちなみにSoftBankの3GC型などの端末では、「Shift_JIS、EUC-JP、ISO-2022、UTF-8」のそれぞれに対応していますが、「EUC-JP、ISO-2022」はキャリアのゲートウェイを通過するときに「Shift_JIS」に自動的に変換されてきます。そのため出力はできますが取り扱いはShift_JISとなるため、SoftBankのみの携帯サイトの場合はShift_JISかUTF-8に絞って対応するとよいでしょう。 絵文字を考慮に入れた文
行政サイトを作る時に気をつけておいた方がいい事 - Qiita
県や市の公式ホームページ制作の経験から、気をつけておきたい点をメモに残しておきたいと思います。 納品前 納期が３月に集中する 行政サイトの場合、お金は年間予算や国からの特別補助金などから支払われます。つまり基本的に年度を跨ぐことが出来ません。（保守にかかる費用は別です）その為、行政の案件に頼っている制作会社は納期が重なり３月が滅茶苦茶忙しくなります。 年度末は余裕を持ったスケジュールを組んでおきましょう。 見積もりは２割増しで ここで言う見積とは入札時の見積もりではありません。行政の案件をいくつかこなして担当者と仲良くなってくると、コンペの上限金額を決めるために事前に見積を頼まれる事があります。「もし○○みたいな案件だったらいくら位でできそう？期間と見積もり貰えると助かるんだけど。」みたいな感じです。サラリーマン金太郎の東北編で出てきたアレです。大事なのはここで割引など一切考えずに、むしろ
Google Maps APIをコピペで使い倒せ！Web初心者でもカスタマイズできるgmaps.js | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは。エンジニアののびすけです。 最近はひさしぶりに浅草をランニングして健康オタクを気取っています。 さて、ランニングといえば、アプリを使ってタイム測定をしている人も多いのではないでしょうか。大半のアプリには地図が内蔵してあり、特にGoogle Mapsを呼び出しているものが多いですね。 そこで今回は、そのGoogle Mapsをカンタンに導入できるgmaps.jsを使ってみたいと思います。コピペで試せるので、JavaScriptが得意ではないデザイナーやコーダーの方にもおすすめです。 http://hpneo.github.io/gmaps/ gmaps.jsはGoogle Maps APIを使いやすくしてくれるライブラリです。 そのメリットは大きく3つあります。 1. シンプルなコード 記述方法がとてもカンタンで、通常のGoogle Maps APIよりも分かりやすいソースコード
clearfixの最新版 -フロート関連やマージン相殺の不具合を解決するモダンブラウザ用clearfix
米Yahoo!のフロントエンド エンジニア: Thierry Koblentz氏から、シンプルなスタイルシートで書かれたモダンブラウザ用のclearfix最新版を紹介します。 The very latest clearfix reloaded clearfixとは おさらい: micro clerafix(IE6+) モダンブラウザ用のclearfix最新版 clearfixとは 「clearfix」とはフロートした要素が親要素からはみ出してしまう、親要素の背景が表示されないなどを回避するもので、当サイトでもいくつか紹介してきました。 おさらい: micro clerafix(IE6+) まずは、おさらい。 micro clearfixは、normalize.cssのNicolas Gallagher氏によるもので、2011年にリリースされました。
Bootstrapで日本語をより美しく表示させることにこだわった無料のテーマ -Honoka
Bootstrapは人気のフレームワークですが、日本語のコンテンツを表示するために最適化されているとは言えません。フォント指定・文字サイズをはじめ、日本語をより美しく表示するためのさまざまなアプローチを取り入れたテーマ「Honoka」を紹介します。 単に使用するだけでなく、他のものでも日本語を美しく表示させるのに役立ちます。 Honoka Honoka -GitHub 日本語フォントは、たくさんのフリーフォントがあります。 2017年用、日本語のフリーフォント 259種類のまとめ Honokaの特徴 Honokaのデモ Honokaのアプローチ -Bootstrapでの日本語表示最適化 Honokaの利用方法 Honokaの特徴 Honokaは、Bootstrapでより美しく日本語を表示させることにこだわったオープンソースのテーマファイルで、これをベースにWebサイトを作成したり、既にBo
WEB界隈で働く人が重宝しそうな「WEBマーケティング」と「SEO」のチートシート6+2個まとめ。 - おしブロ from STONEWEB
WEB界隈でよく聞く言葉に「チートシート」というものがあるのですが、これは「cheat（チート） = 騙す、ズルする」という言葉から「ズルするシート」要するに「カンニングペーパー」のことを意味していて、これが転じてWEB界隈ではプログラミング言語やコマンドやショートカットなどを見やすく一覧にまとめてある表のことを指します。 ちなみにこの記事では少し趣向を変えて、WEB界隈で働く人が「これは便利かも」と重宝しそうな「マーケティング」と「SEO」に関するチートシートを集めてみました。 WEBマーケティング関連のチートシート3+2個 大きな意味での「WEBマーケティング」全般に重宝しそうなチートシートを集めてみました。 www.seojapan.com リスティング広告運用チートシート LPO改善チェックリスト チートシートではないけど「これはWEBマーケティングに重宝するかもなー」というチェッ
PCサイトのUIデザインにおける12のトレンド | ベイジの社長ブログ
スマートフォンの普及で、PCで閲覧するWebサイト（以下、PCサイト）に対する注目度は下がっています。しかし、BtoBのデジタルマーケティングにおいては、PCサイトが今後も戦略の中心になるでしょうし、BtoCにおいても、PCサイトが不可欠な領域もまだまだ多いです。 ハードウェア的に大きな変化のないPC向けのWebデザインというと、ノウハウは固定化されている印象もありますが、実際には時代の流れを受け、今も変化を続けています。特に以下のような環境変化が、PCサイトのUIデザインにも大きな影響を与えています。 表示デバイスの多用化 スマートフォンアプリの一般化 タッチスクリーンの普及 トレンドに合わせれば成功、というではありませんが、その根底に流れているユーザ動向の変化については、十分に理解しておく必要はあるでしょう。そこでこのエントリーでは、PCサイトのUIデザインにおける最新動向を、その背景
SQLインジェクション対策もれの責任を開発会社に問う判決
ポイントは下記の通りです。 X社（原告）はセキュリティ対策について特に指示はしていなかった 損害賠償について個別契約に定める契約金額の範囲内とする損害賠償責任制限があった 当初システムはカード決済を外部委託し直接カード情報を扱っていなかった X社が「カード会社毎の決済金額を知りたい」とY社に依頼をして、その結果カード情報をいったんDBに保存する仕様となった（2010年1月29日） X社からの問い合わせに対してY社は、カード情報を保持しない方式に変更することが可能で、そのほうが安全となり、費用は20万円程度である旨を伝えた（2010年9月27日）が、その後X社は改良の指示をしなかった 以下の脆弱性その他が認められた システム管理機能のIDとパスワードが admin/password であった 個人情報が記載されたお問い合わせログファイルの閲覧が可能（ディレクトリリスティングと意図しないファイ
「エンジニア病」を抱えたあなたに効く「デザインの考え方」 ～ソニックガーデン・デザインメンター対談のまとめ～ - give IT a try
はじめに 先日、僕が勤務しているソニックガーデンのブログ記事で、弊社プログラマとデザイナーさんの対談記事が公開されました。 【前編】エンジニアの会社でデザインがうまくいくワケ〜「エンジニア病」にはダメ出しされよう 【中編】プログラミングとデザイン、やっていることはわりと同じ〜「デザインは感覚じゃない」 【後編】デザインできるプログラマの育てかた〜「デザインメンター制度」のキモは理由で納得！ インタビューに登場する町田さん（@machida）と赤塚さん（@ken_c_lo）は僕もよく知っているとても素晴らしいデザイナーさんです。 素敵なデザインができるのはもちろん、HamlやSassなどプログラマ寄りの技術知識も豊富に持ち合わせていますし、物腰も柔らかくてとても相談しやすい方たちです。 業界の各方面から引っ張りだこなのも十分頷けます。 ところで、上の記事の中に出てくる「デザインメンター制度」
Web制作者が助かるヒアリングシートや問い合わせ返信に使えるテンプレート - コムテブログ
TL;DR 遠方のお客様からのサイト制作依頼、メール問い合わせがあった時に、どんな内容を返信すればよくて、どんなことを聞いておけば概算見積もり（初期費用・ランニング費用）を作りやすくなるのか。ヒアリング時も、ある程度聞き出したい。 ネットや本でも意外と「具体的な例」がないなぁと思い、今回はコーポレートサイトや EC サイト制作依頼があった時に、メール返信や、最低限クライアントに聞いておきたいことや尋ね方をまとめました。ヒアリングシートにも応用できます。会社によって違うと思いますが、ざっくりとメモしておきますので、後は自分流にアレンジしながらご活用ください。 メール用テンプレート ここからはメール返信用です。 コーポレートサイト コーポレートサイトの制作依頼があった時に、具体的にどんな内容をヒアリング、または聞いておけばよいのか項目をまとめました。聞き出した内容をもとに社内スタッフと共有し概
誰でも良い文章が書ける！Webライティング11のルール（スライド） | ベイジの社長ブログ
Web制作者を悩ませる問題に、「Webを熟知したコピーライターがいない問題」があります。特にメディア型のWebサイトの場合、文章の質がコンテンツパワー、ひいてはWebサイトの集客力・訴求力そのものになってきます。しかし現状、プロジェクトメンバーにコピーライターが参加しないのは当たり前になっています。 また、もしコピーライターをプロジェクトに参加させたいと思っても、Web特有のユーザ行動や設計思想、SEOなどに精通し、Webに相応しい文章を作ってくれるコピーライターは、この市場にごくわずかしか存在しないのではないでしょうか。 このWebのコピー問題は、考える以上に深刻です。なぜなら、文章の良し悪しで、コンバージョン率もユーザの満足度もブランドイメージも、簡単に変わってしまうためです。そして、その問題に対する私たちの結論は「全員でコピーをチェックして校正しよう」ということです。 私自身は今まで
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
webtoolnavi.com
