Webフォント読み込み戦略（2021年） - MOL
Preload web fonts 前回、といっても2年前だが、display=swapとはなにかで、Google Fontsを読み込むときはURLパラメータに display=swap をつけるといいよと言った。というわけで、それ以降、『目標をセンターに入れて、display=swap…』と盲目的に考えるようになってた。 おさらいとして display=swap では、まず代替フォントを表示し、Webフォントをダウンロードしたら、随時スワップするという挙動になる。この場合、代替フォントからWebフォントへ切り替わる FOUT (flash of unstyled text) が起こってしまう。こんな感じ↓ 出典：font-face descriptor playground まぁ何も表示されないよりかは良いかと思うわけだが、時は流れ、最近ではWebの指標として、Web Vitalsという
PWAに特化したカンファレンス「PWA Night CONFERENCE 2020」、2月に渋谷で開催
PWA（Progressive Web Apps）の勉強会コミュニティであるPWA Nightは、PWAに特化したカンファレンスイベント「PWA Night CONFERENCE 2020」を、2020年2月1日にAbema Towers（東京都渋谷区）で開催する。一般チケットは1000円、懇親会付きチケットは2000円。 「PWA Night CONFERENCE」は、PWAについてカジュアルかつフラットに情報交換し、トレンドを盛り上げることを目的に開催する。セッションはビジネス系、開発系の両方のテーマを扱い、エンジニアだけでなくデザイナーやディレクターといった、Webサービス開発に携わるすべての人が楽しめるカンファレンスを目指している。 開催日時は2020年2月1日13時～20時30分（12時15分開場）。 登壇者 PWAは、新たなWeb体験を作っていくためのWeb開発コンセプトで、2
拝啓、お客様。Webサイト制作のコストはここにかかります。 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
令和ですね。こんにちは。バックエンドエンジニアのまさくにです。ゴールデンウィークで休んでいたら、シュワシュワと筋組織が融解し、「自然に帰ろう……自然に帰ろう……」と遺伝子に刻み込まれた内なる声が僕を光射す方へ誘いました。もはや社会復帰は難しいかもしれない。 さて。さてさて。 皆さま、いかがお過ごしですか。新しい期に入り、心機一転したい気持ちでしょうか。何ならアレですか。お持ちのWebサイトをリニューアルしたい、そんな気持ちをそろそろお持ちでしょうか。 失礼ながら、そのお気持ち、 たぶん5ヶ月、遅いです！ 仕事としてWebサイトの制作に携わってから、5年くらいが過ぎました。現在はバックエンドの作業を行いながら、TD（テクニカルディレクション）やPM（プロジェクトマネージャー）として、プロジェクトに関わることも増えてきています。その観点から言って、お客様と我々の間には「Web制作」の考え方にお
ブラウザのキャッシュ - Carpe Diem
概要 Webフロントのパフォーマンス診断 - Carpe Diem で指摘されたブラウザキャッシュの対応をするため調べてみました。 大きく分けて強いキャッシュと弱いキャッシュの２種類のキャッシュがあります。 強いキャッシュ ブラウザ側でリソースを保持し、期限が切れるまでサーバにHTTPリクエストを発行しません。 なので一度ブラウザにキャッシュされるとサーバ側からハンドリングすることができなくなります。 これを設定する方法は Cache-Controlヘッダー Expiresヘッダー の２つがあります。 Cache-Control: max-age サーバからのレスポンスで以下のようにCache-Controlヘッダーを付けます。 Cache-Control: max-age=3600 このヘッダーが付いたリソースはブラウザ上では強いキャッシュとして残ります。 max-ageは秒数なので、こ
やってられるか！！蹴りたいフォームの１２要素 | WP-E (仮)
UXとか難しいことはよくわかんないですが こんにちわ！@ampersand_xyzです。UXとかUIデザインとか、かしこさが低いので小難しいことはわからないですが、個人的にかつ主観バリバリで「イヤだな」って思うことはわかる！ 飛行機やホテルの予約などで、ちょいちょいお問い合わせフォームや予約フォームを使うのだけど、その時に思わずイラッとしちゃうようなフォームの要素を思い出してまとめてみました。 （1）要件的に適切でなさそうな必須項目が多い 名前や返信先などの情報が必須になるのはそれはもちろん構わないけれども、 所属部署名、とか、業種、とかそういうのが必須の場合。 もちろん、問い合わせる先やその内容によって、 例えば、保険等に関する問い合わせだと業種によって契約の内容が違ってきたりするので必須になるのは頷けるけれども、これが食べ物の通販の問い合わせフォームとかで必須だったら「？」って感じる。
Web開発者に革命をもたらす！「Web Components」超入門 | 株式会社LIG
こんにちは。デザイナーの王です。 Webアプリはデスクトップアプリとは違い、まだまだ発展途上の技術のため、色んな所でまだ未熟な部分があります。デスクトップアプリでは当たり前のことでもWebアプリではできなかったりすることも多いのです。中でも、UIのコンポーネント化問題が以前から指摘されてきました。 通販サイトにある「購入ボタン」を例に説明すると分かりやすいと思います。 この手のボタンを作るには以下の手続きを要すると考えられます。 外観を整える CSS HTMLマークアップ クリックした際の挙動 JavaScript 何が厄介かというと、「再利用」が難しいというところなんですね。 例えば、同サイトの別のページで同じボタンを使いたい場合、js、CSS、HTMLを再度記述しなければなりません。しかも場合によってはHTMLのマークアップが非常に冗長化していることもある。 「購入ボタン」はあくまで一
黒い画面不要！デザイナ向け静的サイトジェネレーター「Phest」を公開しました | チャットワーククリエーターズブログ
こんにちは！ChatWork CTOの山本です。 ChatWork Advent Calendar3日目を担当します。 今回は、ChatWork社内でサイト制作に使っている、デザイナ向け静的サイトジェネレーター「Phest(フェスト)」というツールを公開します！ >>PhestのGitHubリポジトリはこちら 静的サイトジェネレーターって？静的サイトジェネレーターとは、テンプレートなどプログラム的な処理を実行し、 HTML/JavaScript/CSS/画像などだけで構成された静的なWebサイトとして書き出すツールのことです。 Webサイトをつくる上で共通のヘッダやフッタなどは、PHPやSSIなどのinclude構文を使ったり、 そもそもWordpressなどのBlogやCMSなどを使って構築するケースが多いと思います。 静的サイトジェネレーターは、そういったシステムが必要な部分をあらかじ
企画・提案・見積・納品・契約などのテンプレ・知識まとめ２３ | コムテブログ
TL;DR クライアントさんとの打ち合わせや会議の後は、必ず議事録を書いて社内共有します。座った位置や発言なども、思い出しながら簡潔に書きます。おかげで「何を話したっけ？」「言った、言わない」を防げてます。フリーランスの人は、見積書、請求書、契約書、法律などのテンプレや知識があると、スムーズに先へ進めます。その他、ヒアリングシート、契約書など Web 制作業でリアルで必要だった書類系テンプレや知識をまとめました。 企画／提案 １．企画書 企画書はどれくらいのコストで効果（売上）を得るかというのが一番大切。とはいえ、上司を説得できる企画書も大切。以下は企画書の作り方と資料作成サービスなどのまとめです。 [保存版] 最強の企画書の作り方と資料作成サービス完全まとめ | 世界ろぐ “通る企画書”作りの基本／上司を説得できる企画資料の作り方講座#1 | Web 担当者 Forum ２．提案書 提案
オブジェクトのドラッグ移動を実現するJavaScriptライブラリ·Pep MOONGIFT
Pepはデスクトップ/スマートフォンの両方で動作するドラッグライブラリです。 ゲームなどでWebブラウザ上のオブジェクトをドラッグアンドドロップしたりする操作はよくありますが、その操作をデスクトップとモバイル両方に対応させたのがPepです。 使い方は簡単でDOMに対してpep()を実行するだけ。 ドラッグで移動させられます。 枠の中だけでの移動もその逆もできます。 コールバック対応です。 スライダーを動かすと大きさが変わるデモ。 X軸、Y軸を固定にすることもできます。 こちらはiPhoneで試した所。動きに慣性があるのが特徴です。 Webブラウザ上のオブジェクトを動かすという操作は通常のWebサイトではあまりない動作なので面白いです。またデスクトップとスマートフォン両方に対応しているので使い勝手が良いのではないでしょうか。 PepはJavaScript製、MIT Licenseのオープンソ
Account Suspended
Account Suspended This Account has been suspended. Contact your hosting provider for more information.
URLの「-（ハイフン）」と「_（アンダースコア）」はどちらを使用すべき！？ 調査してみた。 | Web担当者Forum
WEBサイトのURLを命名する際、皆さんはどのようにファイル名を決めているでしょうか。 特に気にせず付けているのが「-（ハイフン）」「_（アンダースコア）」。 当社のお客様からも 「URLを決める場合、ハイフンとアンダースコアって違いあるんですか？」 という質問をいただきます。 今回はそのハイフンとアンダースコアの違いについて、調べてみました。 まずはGoogleで検索してみました。 皆さん気にされているようでいろいろ出てきますね。 検索結果を上からいくつか見ていくと、結論としては「-（ハイフン）」を利用するほうがよいようですね。 Googleと相性の良いURLの作成 – Googleサポートサイト http://support.google.com/webmasters/bin/answer.py?hl=ja&answer=76329&to... たとえば「blog-inbound」とい
８．見直すだけで成約率３割増！セールスコピー３５個の最終チェック項目
ユーザーに届ける価値を徹底的に追求する マーケティングを提供します © Copyright 2022 バズ部. All rights reserved. WEB上のランディングページでも、DMでも、チラシでも、真剣に売れるコピーライティングを仕上げようとすると、気をつけるべき部分が非常に多い。 しかし、あれこれ考えすぎると、良いセールスコピーは書けない。 そこで、コピーライティングの仕事をする際は、私の経験上、セールスコピーを書くための材料が揃ったら、それを頭に叩き込み、何も考えずに感性に従って書けるだけ書き、その後に、理性的に見直すというやり方が最良だ。 そして、この「コピーライティングの成果を３割増にしてくれる３５のチェックリスト」は、私がセールスコピーを書き上げた後に、必ずチェックしている項目だ。 一通りコピーを書き上げた後に、このリストに沿ってチェックしていくと、あなたのコピーライ
Expression Web team blog
This browser is no longer supported. Upgrade to Microsoft Edge to take advantage of the latest features, security updates, and technical support. Blog by the team behind Microsoft Expression Web Microsoft Expression News We released important news today about the Expression family of products. Please visit the... Author: Lori Dirks Date: 12/20/2012 Expression Web 4 Service Pack 2 We’re pleased to
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
CKEditor Ecosystem | CKEditor.com