はじめに Webサイトはページの構造を表すHTML、スタイルを表すCSS、動きを表現するJavaScriptによって構築されています。現在Webサイトの多くが、PRや顧客獲得などのマーケティング目的で活用されており、状況に応じて内容を更新していきたいというニーズがあります。 内容の更新のたびにエンジニアに頼んでHTMLの編集をしてもらうのはコミュニケーションコストもかかりますし、貴重なエンジニアリソースの浪費とも言えます。 これを解消するのがCMSであり、エンジニアの手を借りずとも管理画面からWebサイトの内容を誰でも書き換えることのできるシステムです。 盛り上がりを見せるヘッドレスCMS 「ヘッドレスCMS」は新しいタイプのCMSです。従来型のCMSはコンテンツの入稿画面・データベースに加えて表示面がセットになっていますが、それに対してヘッドレスCMSはヘッド（表示面）がなく、APIによ

こんにちは。フロントエンドエンジニアの松岡です。 この記事では、Webアクセシビリティ向上をスタートするためにカルテット開発部で行った取り組みについて紹介させていただきたいと思います。 Webアクセシビリティ 私が「Webアクセシビリティ」を認識したのは、フロントエンド界隈でアクセシビリティについての注目度が上がり、時おりブログなどでこの言葉を見かけるようになってからです。 歴史に目を向けると、Webの技術の標準を定めているW3Cが20年以上前から WCAG（Web Content Accessibility Guidelines） を公開しています。 WCAG 1.0 Recommendation WCAG 2.0 Recommendation WCAG 2.1 Recommendation WCAG 2.2 Working Draft WCAG 3.0 Working Draft 当初

Auroraはcookieを使わない完全オープンソースなWeb解析ツールです。GAを始め多くのアクセス解析ツールが行う個人情報収集を行わず、アクセスした全員を匿名ユーザーとして扱う、というプライバシーフレンドリーな解析ツールです。 100％OSSとなっており、有償サービスなども用意しておらず、常にソースコードを開示しており、ユーザーへのプライバシーの配慮だけでなく開発者にも安心して使える解析ツールとなっています。 Next.js、Tailwind.css、Knex.jsで作られています。ライセンスはMITとの事。 個人的にもそろそろGA卒業したいなと思いつつも重い腰が上がらず。ブラウザやメールサービスなど出来るところから脱Googleを試みつつもなかなか難しいなという印象です。時間を作って試していきたいと思います。 Aurora

Webアプリやスマホアプリ、オンラインショップ、オンラインサービスなど、Web開発における一通りの需要に応えられるような知識・スキルを練習するのに役立つプロジェクトを紹介します。 8つのプロジェクトにはそれぞれ異なる課題が設定されており、開発者が行う実際のタスクが反映されています。 バックエンドが中心ですが、フロントエンドのCSSのテクニックなども磨けます。 8 Projects with modern designs to become a Full-stack Master 2020 by Thu Nghiem 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに Image Uploader My Unsplash CatWiki Authentication App Shoppingify Chat Group Tw

「Android7.1以前でLet's Encrypt証明書のサイトが見られなくなる」の続き。 色々動きがあって猶予もできて助かった形だけど、来年9月29日以降の対応をどうするか考えないといけない状況なのは当然変わっていません。先にまとめると以下。 何もせずとも来年の1月11日までは猶予が伸びた 証明書を発行する側の場合、各クライアントで --preferred-chain "DST Root CA X3" のようにオプション設定することで、来年の9/29まで先延ばしが可能 独自ドメインに対して自動でSSL証明書を発行してくれるサービスを利用している場合はサービスが声明を出していないか調べ、出してない場合は問い合わせると良いでしょう 前回以降の動き go-acme/legoに--preferred-chainオプションのpull requestを取り込んでもらいました デフォルトRoot証

「デブは恋愛対象外」「毛深い男は嫌われる」 最近インターネットで、こういった表現の広告をしばしば目にするようになったと思いませんか。外見のコンプレックスを刺激して商品を宣伝するこのような広告は、「コンプレックス広告」とも呼ばれています。 多くの人が利用する動画サイトなどにも流れているこうした広告。「外見上の差別」を助長するとして、改善を求める声が上がっています。 （ネットワーク報道部 記者 田隈佑紀） 「体毛や体型などに関する卑下の広告、やめませんか？」 ことし4月、ネット上で始まった署名運動。これまでに3万を超える署名が寄せられています。 指摘しているのは、動画投稿サイトの「YouTube」で冒頭や途中に流れる動画の広告。外見上の劣等感を刺激して商品を宣伝する広告で、「コンプレックス広告」とも呼ばれています。 サプリメントや化粧品などの分野で多く見られ、体型、体毛、肌などの外見を、恋人や

鳥取県鳥取市で主にホームページの制作を行っている合同会社フットでWebディレクター兼エンジニアをしている岡村といいます。 このnoteは先日、各地でWebディレクターをされている方々と「Web制作の見積り」というテーマでZoomを使用した情報交換会を行った際に自身がカンペとしてまとめたものをnote用に加筆修正したものです。 情報交換会の実施後にTwitterで「こんなお話しましたー」とつぶやいたところ、普段あまり「いいね」がつかない僕のアカウントにしては結構反応を頂きました。 情報交換会でも「他の人の見積書の作り方を知る機会がないので新鮮だった！」「発見があった！」という声が挙がり、僕自身も新しい気付きがあったので、こういった情報を共有すると参考になる方がいるかも。ということで、非常にざっくりとしていますがまとめてみました。 タイトルにあるように、あくまでも僕たち（合同会社フット）の場合

こんにちは、フロントエンドエンジニアのてりーです。 僕の詳しいプロフィールはこちら 個人的には2024年現在は未経験・独学からプログラミングで稼ぐにはフロントエンド開発が1番手っ取り早いと考えています！ 興味があればご覧ください。 はじめに 今回は「web制作案件」というテーマに対して、 僕が良く遭遇する「あるある」と「対策記事」をセットでまとめました。 フリーランスになりたての方や、これからフリーランスを目指す方は是非参考しにして下さい。 制作準備 「初めてのクライアントさんからの案件だな」 デキる人に見えるズルい仕事テクニック 初めてのクライアントさんの時はいつも以上に本気を出すために、一旦この記事を読みます。 仕事が円滑に進むようなテクニックが誰でも実践できる形で書いてあるので、最高です。 毎回はじめに意識するだけで、ちゃんとした人に近づいている気がして気分が良いです笑 「見積もり額

CSSやHTMLやJavaScriptをはじめ、カラーやフォントやアクセシビリティなど、Web制作時に役立つオンラインツールをまとめたTiny Helpersを紹介します。 無料で利用できるツールがまとめてあるので、非常に便利です。

ベストプラクティスや「高速化につながる！」と紹介されている記事では、逆効果、もしくは効果があるシチュエーションがあまりに限定的な手法が紹介されていることが多いので、アンチパターンとして紹介します。 本記事は「Webパフォーマンス Advent Calendar 2019」2日目の記事です。 https://qiita.com/advent-calendar/2019/web_performance 本記事はWebパフォーマンス高速化の専門家である株式会社Spelldataの竹洞 陽一郎氏にアドバイスをもらいました。HTTP/2の伝送の画像など一部資料のご提供もいただいております。誠にありがとうございます。 https://spelldata.co.jp/ ほとんどの場合で間違い 1. すべての画像をCSSスプライトその昔、画像をすべて1枚にまとめて、DOMのbackground-image

公正取引委員会がCookieの利用を規制する方向で検討に入ったと、朝日新聞が10月29日付で報道し、Twitter上で話題になっている。公取委は、利用者の行動追跡に利用できるCookieが個人情報などに当たるとして、取得時に利用目的の明示などを求める考え。一方、経団連は「経済の発展を阻害する」として規制案に反対している。 【修正履歴：2019年10月29日午後7時57分　記事の記述を一部修正しました】 【修正履歴：2019年10月29日午後10時35分　記事の記述を一部修正しました】 Cookieは、Webページを閲覧したときのデータを一時保管する仕組み。Cookieの情報だけでは個人を特定できないため、個人情報保護法の対象ではないが、他の情報と組み合わせれば特定できる場合もある。 公取委は8月、消費者保護を目的としてデジタルプラットフォームを運営するIT企業と消費者間の個人情報取引につい

現在では世界中で数100万人以上のユーザーから絶大なる人気を誇っているサービスにも、必ず初期ユーザーがいたはず。 多くのサービスがユーザー獲得に苦しむ中で、人気サービスはどのようにして無名の頃にユーザーを集めていったのだろうか？ それぞれのサービス内容や時代背景によって、そのユーザー獲得方法は異なるが、全てに共通しているのは、かなりユニークな方法を取っているという事。 今回は現在人気になっている下記の32サービス企業のユーザー獲得方法を紹介する。 AirbnbAlibabaAmazonAppleDoorDashDropboxFacebookFirefoxGitHubGrouponGumroadHotmailInstagramIntercomMicrosoftMixpanelPaypalPinterestProductHuntRedditSalesforceSkypeSlackStripeT

「若者はネット検索しない」といわれて数年たつが、実際はどうなのか。検索しないのなら、商品の情報取得や購買の導線はどうなっているのか。調査データや取材から、美容系をメインに若者のショッピング事情を分析した。 テキストよりもビジュアル情報が刺さる 2016年にあるタレントが「若い人はネットを検索しない」と発言したことが話題になった。それまでSEO対策を熱心に行っていた大人たちには衝撃の事実だっただろう。Web検索を使わないで何を使っているかといえば、Instagramだという。「テキストよりもビジュアル情報が若者に刺さる」といった発言もあった。 それから数年がたち、その傾向はデータとして裏付けられている。マクロミルが18年8月に公表した消費意識やお財布事情などの調査によると、SNSの情報に影響を受けて買い物をする人が半数だという。15～24歳では「かなり影響を受ける」「まあまあ影響を受ける」と

印刷されたコンテンツとデジタルコンテンツ。記事が読まれるときの大きな違いの一つが「タイトルとサムネイル」の重要性です。デジタルでは、ウェブメディアにしてもニュースアプリにしても、最初に読者の目に入るのは、タイトルとサムネイルだけ。それゆえに、記事に興味を持ってもらうためのタイトルの決め方には、多くの編集者・ライターが工夫を重ねていることでしょう。 しかし、本文を参考に記事を選ぶことができないというスマートフォンでの閲読体験のもとでは、タイトルの決め方は、記事の「選ばれ方」だけでなく、記事の「読まれ方」にまで影響を及ぼします。 今回は、毎日1万本以上にのぼる、SmartNewsで表示された記事の閲読データを分析しました。そこで見えてきた、本文まで読まれやすい記事タイトルの特徴をお伝えします。 タイトルと導入部の印象が異なるだけで読者は離脱する SmartNewsでは、記事の一覧を表示する画面

言葉って面白いですよね。言葉を少し付け加えたり、入れ替えたりするだけで、その言葉の印象が大きく変わることがあります。WebページやスマホアプリのUXに特化されたコピーライティングの解説書を紹介します。 思わずクリックしたくなるタイトル、迷わずクリックできるボタンなど、見かけませんか？ ボタンに書かれているラベル、ボタンに添えられたテキスト、これらに使われている文言はほんの少し工夫を加えるだけで、劇的な効果を発揮します。 本書の帯にある「たった2文字を変えただけで、売上が1.5倍になった！」というような宣伝文句に私は懐疑的なのですが、本書には良い意味で裏切られました。 当ブログのビジター全員にお勧めします！ Webページやブログ、そしてスマホアプリなどで使用する言葉、ボタン、フォーム、ナビゲーションなどに使用する文言など、言葉の魅力でWebのUXを改善するためのライティングについて詳しく解説

日々の業務で得た学びやノウハウを知見として貯めていくことは、組織の生産性や知識の向上には欠かせません。その蓄積には、メンバーが積極的に自分の考えをアウトプットを行う環境作りが重要です。 しかし、少数精鋭の組織であればあるほど、個々がプロフェッショナルとして目の前の業務に集中し、情報が自身の中のみに蓄積されがちです。 rootのメンバーは学習意欲が強く、これまでもチームワークを発揮しながら効率的に学びを得る方法を模索してきました。その方法の1つが、Dropbox Paperを使ったインプットとアウトプットのサイクル作りによる、ナレッジの共有です。 本記事では、root内でのDropbox Paperの活用方法をご紹介します。 貯まらず流れていく貴重なナレッジDropbox Paperを使う前、日頃の会話はSlack、各プロジェクトの振り返りはGoogleスプレッドシートを主に使っていました。

ヤフー株式会社は、2023年10月1日にLINEヤフー株式会社になりました。LINEヤフー株式会社の新しいブログはこちらです。LINEヤフー Tech Blog デザイン特集5本目、最後の記事です。 こんにちは、ブランドマネジメント室デザイナーの上田絵理です。 サービスロゴやアイコンの作成や管理、けんさくとえんじんというキャラクターの担当をしています。 私が入社した1999年当時は社員が100人くらいで、全員の顔が覚えられるくらいだったのですが、入社してから20年たった今、社員数は6500人超*1...！ 　インターネット環境とデバイスの変化とともに進化してきたYahoo! JAPANのトップページを、デスクトップ風のビジュアルで表現してみました。移り変わるウェブデザインの歴史をお楽しみください。 1996年　アメリカのYahoo!のデザインを踏襲 1996年4月に国内初の検索サイトYah

29歳よしもと芸人(吉本興業)がWebデザイナー未経験で職業訓練校に通い5年後フリーランスのフロントエンドエンジニア(プログラミング)になるためにやった9つのこと 29歳のよしもと芸人(吉本興業)がWebデザイナー未経験として職業訓練校に通い、5年後フリーランスのフロントエンドエンジニア(プログラミング)になるためにやった9つのこと 2019/9/14更新 はじめまして森田賢二と申します。 わたしは今現在、吉本興業に所属をしていながら、 フリーランスでフロントエンドエンジニア、会社経営をしています。 この記事は誰向けなのか Webデザイナー未経験の方、学校通っている方、エンジニア転職を考えている方 この記事をなぜ書くか 上記のあなたがこのページを読んだ後、 「よし。なんか勇気もらった。わたしもやってみよう。」 ヒント、後押しになればいいなぁと思い書きました。 注意。長文です。また、芸人活動