本サイトの AMP 提供の停止とここまでの振り返り | blog.jxck.io
Intro 前回の記事で、奇遇にも本サイトの AMP 対応を落とすことになった。しかし、そうでなくても AMP をどこかでやめることは考えていたため、きっかけの一つが SXG 対応になったのは、順当な流れだと筆者は感じている。 これは AMP がなぜ始まり、なぜトーンダウンしつつあるのか、そしてこれからどうなっていくのか、という流れをまとめるいい機会でもある。 その過程で生み出され、本サイトでも検証を続けてきた Performance Timing API, Core Web Vitals, Signed HTTP Exchange 、そして今構想されている Bento AMP などを踏まえ、一連の流れを覚えている範囲で記録としてまとめておく。 ソースは筆者の主観であり、眺めてきた体感を mozaic.fm の Monthly Web などで話してきたものがベースなので、信頼性や正確性は期
これなら分かりやすい！Webサイトのデザイン仕様書・指示書の作り方
デザイナーがWebサイトのUIを実装する際にデベロッパーに渡すデザイン仕様書・指示書の作り方を紹介します。 仕様書を作成する基本ツール、指示に適したフォントやカラー、グリッドや要素間の距離を自動的に計算するツールをはじめ、レイアウトや各UIコンポーネントのデザイン仕様の記述例まで、デザインを仕様化する解説記事です。 ブレイクポイントの説明、スティッキー要素の仕様説明、相対サイズの要素の説明方法、ボタンの文字数の説明、アニメーションする要素の説明方法など、デベロッパーに分かりやすく、デザイナー自身も見直せるデザイン仕様書を作成します。 The Art of Design Spec'ing by Mahdi Farra 🍉 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 デザイン仕様書とは デザイン仕様書に使用するツール デザイン
ランディングページ制作に役立つマニュアルと改善法(toCtoB)｜相原 ゆうきfree web hope
こんにちは！株式会社free web hopeの相原です。 今回は当社でのランディングページの創り方をベースしにて、ランディングページ制作をする時に役立つフレームワークを公開します。当社の社内マニュアルにもなっているものです。お陰様で中々の高評価を頂いており、書いた甲斐がありましたtt これ読んだらめちゃめちゃやる気出た！！ 何から始めたら良いのかわからず何も知らないままやろうとしていたからね、そりゃあ心も折れるはずだ👶 ランディングページ制作に役立つマニュアルと改善法(toCtoB)｜相原 ゆうきfree web hope @fwh_aihara #note https://t.co/u5ACEAfePU — せりょ🌷＠Travel×Shopify✈︎ (@seritulip) October 14, 2020 事業戦略から、LPへの落とし込み、tipsまで、半端ない。 めちゃくちゃ
Tabulator - これはすごい。HTMLテーブルを高機能に MOONGIFT
テーブル表示はWebシステムのデファクトとも言えます。業務システムはいうに及ばず、管理者画面などでも必ず求められる表示です。そしてただ表示すればいいという訳ではなく、ソートやフィルタリング、インラインでの編集など様々な機能が求められるものです。 そんな多機能なテーブル表示を実現してくれるのがTabulatorです。多くのニーズを満たしてくれることでしょう。 Tabulatorの使い方 てんこ盛りなデモテーブル。ざっと見てもフィルタ、ページネーション、グラフ表示、ソートなどの機能が確認できます。 インライン編集もサポートされています。 データに合わせて幅を自動調整。 行をクリックして展開する機能。 カラムをグループ化。 カラムを縦に。これはカラムが多い時に便利そうです。 ドリルダウン。 テーブルを入れ子にもできます。 スパークライン表示。 フッターで集計。 HTMLテーブルを変換する機能もあ
1クリックでHTML要素の構造を可視化し、セマンティック要素が正しく実装されているか検証できる -Construct.css
Webページに実装されているHTML要素の構造を可視化し、header, nav, main, articleなどセマンティック要素が正しく実装されているか検証できるスタイルシートを紹介します。 デバッグ機能も備えており、不正なマークアップや問題のあるマークアップを表示することもできます。 Construct.css Construct.css -GitHub Construct.cssはセマンティックHTMLの使い方をより身近にするために、スタイルをフックとしてクラス名を使用するのではなく、直接タグをスタイルするCSSのライブラリです。目に見えないセマンティックのタグであることを視覚的に確認することができます。 ブラウザで簡単に利用できるブックマークレットも用意されています。 ブックマークレット Construct.cssのブックマークレット ブックマークレットを使用すると、以下のCSS
【寄稿】写真が撮れてこそWebライター！本気でライティングを仕事にしたい人のための写真術
どうもタクロコマ（@takurokoma）です。 この記事では、プロのカメラマンでも素人のブロガーでもなく、Webライターを生業にしている人に向けて、取材で活きる写真の撮影、画像編集、入稿方法を余すことなく紹介します。 そもそもこの記事を書くきっかけは、最近の「灯台もと暮らし」ではWebライター向けの記事がよく読まれているからです。Webライターにとって「わかりやすい文章を書ける」ということは、必要不可欠なスキルです。それに加えて、写真を扱うスキルを最低限身に付けておかないといけません。最近のライター募集には、写真を扱うスキルが必須項目として上げられていますよね。 しかし現状は、「カメラを持っていない」「買ってみたけど、なんとなくそれっぽく撮っているだけ」という人が多いのではないでしょうか。取材で撮影した後、編集してWebに適した入稿ができないなら、仕事はもらえなくなると言っても過言ではな
「Find job! Startup」のmixiを退職して起業しました
mixiを退職したのは1年近く前のことである。 mixiを辞めて9ヶ月ニート生活を送った後、代表取締役編集長として出版ベンチャー「株式会社ZINE」を設立した。 前回の退職エントリは2年前に書いている。あの頃から相変わらず編集業を続けている。編集者は文筆業にたずさわっているくせに、ほとんど退職ブログ書いてないんである。ドーテイ汁男優もはなはだしいのだが、だったら自分が書く、というわけである。長文です。 ミクシィ初の編集者になった （たぶん）mixiではじめての編集者になった。正確に言うとmixiニュースというニュース系の部署はあるのだけれども、配信されてくるニュースをまとめたりするのが仕事で、雑誌編集なんかとはちょっと違うらしい。 技術評論社からmixiに入ってオウンドメディアを立ち上げた。 Find job! Startupを立ち上げた Find job! Startupというオウンドメ
クリエイターズネクスト
これからの時代の会社は文化がとても大切だ。 弊社では「なぜ仕事をするのか」 その意味を定めたジョブポリシーがある。 https://cnxt.jp/aboutus/job-policy/ このジョブポリシーに従って、 より良いものを提供していく。 我々が仕事をする理由は 「お客様とハイタッチをする」ためだ。 ハイタッチの音が聞こえる度に、 人類の新しい歴史が切り開かれていく。 お客様の分身を作り、広める。 WEBマーケティングやWEBサイト制作の支援は、 分身をつくることだ、と思っている。 アクセス解析した上で、 社長や一番のトップセールスマンの話をじっくり聞き、 聞き手の生活を想像する。 そうすると、その人の話をWEBで実現するためには、 こうした方がいい、という仕組みが見えてくる。
【初心者向け】ランディングページ（LP）の“もったいない”をなくす構成要素とは？
ランディングページ（LP）は、インターネット広告やリスティング広告の受け口となるWebページのことです。 読み手が求める情報・内容にあわせ、このランディングページの情報を整理整頓することで、広告効果を高めることができます。しかし、構成の内容によっては、せっかくの来訪者が離れてしまうこともあるのです。 今回は、こうしたもったいないミスマッチをなくすため、これからランディングページの制作を考えられている方々に向けて効果を高めるための構成要素をお伝えできればと思います！ ランディングページ(LP)とは？ ランディングページとは、インターネット上のバナー広告や検索エンジンの結果に表示されるテキスト広告のリンク先になっているWebページのことを指します。このページは、企業や製品のWebサイトのトップページであるケースもありますが、多くは広告効果を高める目的で単独で制作されたWebページを用意していま
フリーランスも知っておかないといけないデザイン料金の相場まとめ
フリーランスをスタートして半年以上が過ぎて、まだまだ月々の売上は売上報告にも書いている通り、多い時と少ない時の差がかなりありますが、ありがたいことに仕事自体は次第に増えています。 そうするとしっかりと考えておかないといけないのが、デザイン料金の設定です。これまではクラウドソーシングでのコンペや受注案件など、価格が決まっているものに応募したり、受けたりする流れでしたが、これからクライアントや代理店の方と直で料金の交渉をしたり、見積書を提出することが増えていきます。 そこで改めてその中のデザイン料金の相場について考え、まとめてみました。 デザイン料金で揉める場合 サバイブログでは過去に「デザインのクオリティと値段の関係をハッキリさせておこう」、「【クラウドソーシングも含む】プロに低料金の案件を気持良く、しっかり仕事をしてもらうコツ」という記事で、デザインとお金の関係に関しては色々と思うところを
フラットデザインに似合うボタンが、スライダーを調整するだけで作れるサイト「2.5dBUTTON」 | ライフハッカー・ジャパン
「2.5dBUTTON」はフラットデザインに似合うボタンが作れるサイトです。マウスを乗せるとポコッと立体的に浮き上がるボタンが作成できます。作ったボタンはHTML、CSSごとダウンロード可能です。 以下に使ってみた様子を載せておきます。まず、2.5dBUTTONへアクセスしましょう。 試しにボタンを作ってみました。このようにスライダーを調整するだけで色や形を決めることができます。マウスを乗せると上記のようにポコッと浮き上がります。 HTMLとCSSも自動的に出力されるので、あとはこれらをコピペすればOK。 こちらが実際に使っているときの様子です。YouTubeのロゴを作ったり汎用性が高いですね。ぜひフラットデザインのボタンを作成したいときにご活用ください。 2.5dBUTTON （カメきち）
ほぼ劣化なしでJPG/GIF/PNG/SVG画像を超軽量化してくれる「Compressor.io」は要ブックマーク！｜男子ハック
Webサービスほぼ劣化なしでJPG/GIF/PNG/SVG画像を超軽量化してくれる「Compressor.io」は要ブックマーク！2014年6月13日1 @JUNP_Nです。オンラインで利用することができる無料のWebサービス「Compressor.io」はJPG、GIF、PNG、SVGの画像をビックリするほど軽量化してくれます。面倒なアカウント登録などもなしで、画像をドラッグ&ドロップだけで使えて超便利！ 無料で多様な画像ファイルに対応しているのが嬉しい画像軽量化サービス！Compressor.io - optimize and compress your images and photos オフラインではJPEGの画像軽量化には「JPEG mini」を利用、それ以外の画像については「ImageOptim」を利用していたのですが、これだけではGIF動画の軽量化がもの凄く難しい。 関連：1
コンテンツマーケティングはこう進める！成功事例から学ぶ法則
（この記事は2022年9月29日に更新されました） 皆さん、こんにちは。京都のWebマーケティングチーム「ウェブライダー」の松尾です。 最近、某社からCPIサーバーに乗り換えたことがきっかけで、このコラムを書かせていただく機会を得ました。 前回、前々回と、レンタルサーバーの選び方に関するノウハウをお届けしてきました。 ソーシャルメディア隆盛の昨今、Webコンテンツがヒットすれば、急激なアクセスがやってきます。 その際、Webコンテンツがきちんと表示されるよう、サーバー周りの負荷対策が大事というお話をしました。 今回は少し視点を変え、“そもそも、アクセスを集めるためのWebコンテンツとはどう作ればよいのか？”ということをお話しします。 あなたは「コンテンツマーケティング」という言葉を聞いたことがありますか？ コンテンツマーケティングとは、シンプルにいえば、読み物や動画などの何らかのWebコン
WordPressでSEO対策を考える人へ
いきなりですが、僕のブログはまだまだ記事数も年数も少ないですが、SEO対策の結果はかなりの結果を出しています。僕もそうですが、Wordpressでブログをやる方にとってSEO対策やアフィリエイトはとても関心のある事だと思います。なので、僕なりの手法を手前味噌ながらご紹介致します。 [追記] この記事の続きを書きました。 新しいはてなブックマークの現在とSEOの効果 スポンサーリンク 僕のWordPressのSEO対策の結果 まずは、僕のブログの検索キーワードの結果をお見せ致します。 （2013.04.13現在） 例えば、まず「痩せる」というキーワード。こちらは11,100,000件中5位にいます。 簡単！痩せる方法 ～運動してもやせない理由～ 「iphone カメラ アプリ」だと45,500,000件の中で1位です。 撮って比較！iPhoneおすすめカメラアプリの写真ランキング 他にも「カ
それなりに稼ぐアフィリエイトサイトが完成するまでの全手順 - がん保険や医療保険のサイト | アフィリエイト野郎！
先週、このブログでもお披露目した「がん保険のアフィリエイトサイト」ですが、今回は、サイトの作成過程を記録して記事にしようと思っていたので、所々でサイトをキャプチャしておきました。 過去にアフィリエイトサイトの作り方については何度か書いていおり、基本的には、今でもアフィリエイトサイトの作り方【2012版】で書いたとおりに作っているのですが、デザイン込みの作り方を解説したことはなかったので、今回はなるべく詳細に書いていきたいと思います。 今回サンプルとして使うのは、「 はじめてガン保険」というサイトです。このサイトを見ながら解説を呼んでいくとわかりやすいと思います。なお、WordPressでサイトを作っています。途中WordPressの使い方については、解説が抜けるかもしれませんので、その際は、WordPressの使い方とカスタマイズをご覧ください。 あくまでサイトの作り方の手順ですので、アフ
無料すぎて助かった！WEB制作が「はかどる」素材まとめ
作成：2013/01/21 更新：2014/11/01 Web制作 > 無料素材のブックマークが無限に増えてきた そうだ！整理しよう 今回は一つ一つ紹介せず、すでに「素敵にまとめてあるサイト」をまとめました。まとめ系４８サイトのまとめです。 フォント、素材からレスポンシブ対応した初心者でもOKのWordPressテーマまで、全て無料です。 エンジニア速報は Twitter の@commteで配信しています。 もくじ １．日本語フリーフォント ２．海外のおしゃれなフリーフォント ３．国内の写真素材 ４．アイコン ５．ユニークな素材 ６．ベクター ７．Photoshop補助 ８．ワイヤーフレーム ９．レスポンシブなWordpressテーマ １０．スマホ用ページ テンプレート １．日本語フリーフォント 重複するのもありますが、以下のサイトでほとんどの無料系フリーフォントが揃うと思います。 201
簡単で便利すぎ！WEB制作を「楽」にする無料ツールまとめ
作成：2013/01/28 更新：2014/11/01 Tool > Webサービス フリーソフト、無料ツールなのにここまで使える 前回、無料素材をご紹介しました。 今回は無料で使える「ツール」をまとめます。フォント、画像、配色、htmlからエディター・アフィリエイトリンク作成補助まで。 エンジニア速報は Twitter の@commteで配信しています。 もくじ １．フォント ２．画像編集 ３．ロゴ作成 / ネタ ４．配色 ５．HTML5 ６．CSS ７．ブラウザチェック ８．エディター ９．アフィリエイトリンク作成 １０．フォーム作成 １．フォント PCにインストールされているフォント一覧をプレビュー Font picker イラスト等に使われているフォントを調べる WhatTheFont Windows上のテキストをくっきり、見やすく表示。 gdipp - ｋ本的に無料ソフト・フリー
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
「SEO×SNS×ブログ」で作る最効率化収益システム｜うきだいらブログβ
ウェブでも同人誌でも動画でも商用利用可！女子向けのしとやかでカワイイ日本語のフリーフォント -ロゴたいぷゴシック-コンデンスド | コリス
【これは便利】あなたのWebサイト表示のどこが遅いかを一発で調べるブックマークレット | 初代編集長ブログ―安田英久
