TL;DR 前回（あのサイトでさりげなく使われていた CSS 小技集）の続きとなります。今回はマウス操作によりインタラクティブな動きを出したり、簡単にボックスを等間隔・等幅にしたりと CSS のみで実現できる方法を書いておきます。 インタラクティブ １．マウスオーバーで自動スクロールさせる 最近、マウスオーバーで縦長のページを部分的に見せる WordPress テーマが少しづつ出てきました。こちらは簡易的ながらマウスオーバーにて縦長の画像を見せるコードです。長めの画像を用意してはみ出した部分はoverflow: hidden;で隠しながらtransitionで遅延させ擬似的にスクロールしているように見せます。 html <div class="box-fixed"> <div class="field-wrap"> <div class="field-detail"></div> </di

作成：2014/09/1 更新：2014/11/01 Web制作 > 報告が遅れましたが、5月に退社し6月に起業（株式会社コムテ）しました。今までブログにメモしておいたことが、起業や納品に役立った部分もあり、ブログを継続してよかったと思います。ブログを見てくださっている皆様、ご紹介させていただいたサイト運営者様、応援して下さっている皆様には心よりお礼申し上げます。経営や制作の部分ではまだまだ未熟ですが、今後ともご指導ご鞭撻のほど、よろしくお願いします。 今回は「Web制作で使いたい」jQueryプラグインやスクリプトなどをまとめました。WordPressテーマを作るときに使うもの、検索でヒットしにくいプラグインも多数ご紹介。 エンジニア速報は Twitter の@commteで配信しています。 もくじ 動画 １．動画をブラウザの背景全体に再生させる ２．動画を綺麗に表示させる WP管理画面

作成：2014/06/2 更新：2014/11/01 Web制作 > WebデザインギャラリーやWPテーマなどで「見栄えのする」サイトが使っている効果など。今回はCSSのみで実現できる、動きあるエフェクトをメモしておきます。 エンジニア速報は Twitter の@commteで配信しています。 もくじ マスク １．マスク・キャプション ２．円形キャプション ３．全画面+オーバーレイ ４．ストライプの背景 フルスクリーン系 ５．スライド＋フルスクリーン ６．全画面背景動画 ７．パララックス ８．フルスクリーンにフィット ９．背景画像をブラウザごとに最適化 １０．メガメニュー 画像可変 １１．画像で枠線を表現する １２．半透明＋フィルタ １３．文字以外を透明にしてレイヤーさせる 図形 １４．ループ＋ローディング １５．3Dボックス １６．矢印ナビ 画像切り抜き １７．六角形 １８．卵型＋星形

作成：2014/05/19 更新：2014/11/01 WordPress > ウェブサービスサイトや最近のWordPressテーマで使われているエフェクトや小技をまとめました。今回またjQueryが多くなってしまいましたが、サイト制作時に一手間加えたくなる小技集です。 エンジニア速報は Twitter の@commteで配信しています。 もくじ サイト読み込み時 １．画像読み込み時、ローディング画像を表示／jQuery ２．読み込み時に文字を動かす／jQuery ヘッダー ３．文字の拡大・縮小／jQuery ４．入力補助／jQuery ５．伸縮するサーチボックス／jQuery コンテンツ ６．中心に水平線を入れる／CSS ７．均等に並べる／段組み／CSS ８．コンテンツが現れた時にアニメーションさせる／jQuery ９．マウスホバーで画像を拡大しキャプションを出す／jQuery １０．マ

作成：2013/04/19 更新：2013/06/02 Tool > Webサービス 検索で上位を占めているサイトのページ表示速度を見ていると、1～2秒台が増えてきました。画像のファイル容量が大きいと、ページ速度が落ちるので当然SEOに良くありません。 僕もページ速度を早める為に色々試してますが、画像圧縮は高速化する上で一番簡単だと思います。 今回は、ブログやサイトを作るときに、「便利だな」と思った画像を圧縮するためのオンラインツールやフリーソフトをまとめました。この中から使いやすいのをチョイスしましょう。 エンジニア速報は Twitter の@commteで配信しています。 圧縮系のフリーソフト・サービス一覧 １．TinyPNG ２．PNG Minimizer ３．Compress PNG Images Online ４．PNGGauntlet ５．PunyPNG ６．JPEG Mini

作成：2014/04/7 更新：2014/11/01 Web制作 > あの企業サイトで使われている効果やテクニックをまた探さないといけない、そもそもどういったキーワードで探したらいいのか分からない。そんなこんなで、今回は奇抜なものではなく、「企業サイトで見たことある！」というような、コーポレートサイトに使えそうな定番のプラグインや作り方をまとめました。 エンジニア速報は Twitter の@commteで配信しています。 もくじ スライドショー １．カルーセル（横） ２．フェードアウト ３．画像と文字をスライド ４．文字が遅れて移動する効果 ５．異なるタイミングを設定できる ナビゲーション・メニュー ６．多階層 ドロップダウンメニュー ７．多階層 効果つき ８．スマホではドロップダウン ９．スマホではセレクトメニューに １０．Amazon風 メガドロップダウンメニュー １１．横スライド １

作成：2014/01/27 更新：2015/08/07 Web制作 > 前回、Web制作の一連の流れを書きましたが、今回は少し掘り下げて「コーディング」についてのフローをまとめます(HTML5+レスポンシブ+WordPress)。会社によって違うと思いますが、ざっくりとしたコーディングの流れと気をつけておきたいことをメモしています。 エンジニア速報は Twitter の@commteで配信しています。 もくじ コーディング前の準備 １．仕様書の確認 ２．入稿データの確認・スケジューリング HTML5 マークアップ ３．テンプレート作成 ４．条件付きコメント ５．GCF＋キャッシュクリア ６．OGP記述 ７．ファビコン ８．アウトライン作成 ９．バリデーターをチェック CSS の設定 １０．ノーマライズスタイル レスポンシブデザイン設計 １１．モバイルファーストを基準に設計 １２．プログレッ

TL;DR 受注前、制作フロー、安定収益源の保守方法まで「作って終わりにしない」Web 制作の一連の流れを記載しておきます。社内だけじゃなく、これから独立する人、フリーランスの方も必見です。 オリエンテーション／受注前 １．書類テンプレート一式 オリエンテーションにおけるヒアリングでは、後に作成する提案・見積書に必要となる質問を用意しておきます。自社の説明をする時は、せっかちなクライアントさんもいるので、だらだら話さず、ポイントを抑えてわかりやすく説明します。ヒアリングした後は、議事録にメモし社内共有。必要な書類（ヒアリングシート／企画書／提案書／業務委託書／見積書／契約書）など一式まとめてますので、書類系のテンプレートは以下で。 企画・提案・見積・納品・契約などのテンプレ・知識まとめ２３ ２．見積もりの目安と計算方法 例えば項目を作るとき１．項目／２．内容／３．設計(人日)／４．製造(人

作成：2013/12/24 更新：2014/11/01 Web制作 > サイト構築中にちょっとした動きをのせたいとき、どうすれば良かったのか何度も調べ直さないといけないことがあります。今回はJavaScript で初心者の方でもすぐ活用できるように、使用頻度の高いリファレンスと基本知識をまとめました。 エンジニア速報は Twitter の@commteで配信しています。 もくじ できること １．リファレンス スクリプトの書き方／基礎知識 ２．スクリプトの記述 ３．文字列／特殊文字 ４．演算子 ５．オブジェクト ６．プロトタイプ ７．イベント ８．変数 ９．if文 １０．配列 １１．連想配列 １２．正規表現 １３．デバッグ できること １．リファレンス JavaScriptは開発環境の準備がほぼ不要で、コピー＆ペーストだけで、動くものができてしまいます。他の言語だとそう簡単にはいきません。サ

作成：2013/10/21 更新：2014/11/01 無料素材 > フリー素材は沢山あるけれど、どこに何があるか分かりにくい。ロゴやイラストを作るのにまたあのサイトを探さないといけない。そういったことで１回まとめました。今回厳選したつもりですが、それでも量が膨大になったので簡潔にリストアップしてます。 エンジニア速報は Twitter の@commteで配信しています。 もくじ フリー素材まとめ ダウンロードしておきたいフリー素材一覧 Illustrator のチュートリアル 小技 基本テクニック フリー素材まとめ ダウンロードしておきたいフリー素材一覧 ロゴやイラストを作ったりするときに役に立ちそうなアイコン、ベクター、背景、テクスチャ素材をまとめました。少し変わったモノが多いですが、筆者が何度もアクセスしてしまうブクマ一覧です。 学校や教育関係／アイテム全200種類のアイコン素材 -

作成：2013/09/30 Web制作 > なぜあの人は残業しないのか、帰宅後なにをやっているのか。ブログを継続して書いている理由ってなんだろうか。アフィリエイト収益が本業の収入を超えだすと、生活に余裕が出て気持ちも楽になります。まだ始めてない人、現状突破したい人、とにかく自分のちからで稼ぐと決めた人へ、初心者でも上級者でも一度チェックしておきたい記事をまとめました。アフィリエイトの他に副業に関する情報もあります。 エンジニア速報は Twitter の@commteで配信しています。 もくじ Adsense １．収益を上げる広告配置 ２．ターゲット設定 ３．レスポンシブ／タグ改変 ４．AdSense違反の直し方 動画で収益化 ５．YouTube ブログサービス ６．はてなブログ スマートフォンアプリ ７．リンクタグ生成ツール ８．アプリ宣伝バナー ９．アイコン型広告の収益率 １０．広告の実

作成：2013/09/24 更新：2014/11/01 SEO対策 > 毎月、ECサイトや情報サイトなどアクセス解析保守を9社ほど作らないといけません。ここらでおさらいを兼ねて、Googleアナリティクスを扱ううえで必要なことを整理しようと思います。今回は成果を上げるうえで「知らないと損する」ことをまとめました。 エンジニア速報は Twitter の@commteで配信しています。 もくじ 外部連携（初期） １．複数サイトを一つで管理 ２．すべてを一元管理 ３．ウェブマスター連携 ４．AdWords連携 ５．アドセンス連携 共通設定（初期） ６．プロファイル ７．フィルタ ８．IP除外 ９．Cookie除外 トラッキング設定（初期） １０．トラッキング設定 １１．時間／曜日／日付 １２．集客／キーワード／ページ １３．流入／属性／閲覧開始／トレンド 計測方法と基本知識 １４．ディメンション

作成：2013/08/26 更新：2014/11/01 ディレクション > 集客のためにどんなソーシャルを使えばいいの？どれくらい効果がある？検索１位になったらどれくらいアクセスが多くなるの？といったことをクライアントさんに聞かれます。今後力を入れるべきSNS・CMS・OS・ブラウザなどの対策、方向性なんかを「なんとなく」でもいいから、頭に入れておきたい。今回は、統計やデータの中でも比較的「分かりやすい」資料を公開しているサイトをまとめました。 エンジニア速報は Twitter の@commteで配信しています。 もくじ ソーシャル １．Facebook ２．Facebookページ ３．Twitter ４．ニコニコ動画 ５．Gunosy ６．LINE ７．Instagram／Pinterest ８．Google+／Linkedin ９．mixi １０．2ch まとめ ソーシャル全般 １１．

作成：2013/05/13 更新：2014/11/01 WordPress > ブログを書いて、継続的な収益を発生させたい WordPressインストール後、すぐに稼ぐことは可能か？ 「ブログ」だけで、家族を養うことはできるのか？ 100%可能です。 先日、試験的にWordPressで作成したブログ、開設後２ヶ月目でアドセンス月３万円超え(月間10万PV)という最速記録が出ました。たったの2ヶ月で継続的な収益が発生するならやる気が出ませんか？ 僕オリジナルの方法になりますが、収益までの最短ルート。WordPressインストール後の、初期設定をまとめました。 エンジニア速報は Twitter の@commteで配信しています。 もくじ テーマの選び方 SEO＋収益 強化プラグイン 高速化プラグイン 基本事項 チューニング コンテンツのテンプレート 文章を伝える方法と書き方まとめ 伸びないとき

Python をわかりやすく解説。初心者のPythonプログラマーとWebデザイナーの助けになるブログ。

作成：2013/08/19 更新：2014/11/01 Webサービス > 案件管理や進捗確認、打刻や勤怠管理など社内で共有するファイルはクラウドで管理します。数年前と比べると、よほど重要なものでない限り、ローカルに保存することが少なくなってきました。今回は、社内ツールや日常生活にも使える、できるだけ無料で使える物を中心にまとめました。 エンジニア速報は Twitter の@commteで配信しています。 もくじ 転送 １．ネット郵便 ２．ネットFAX ３．ネットプリント ４．ファイル転送 ５．フォーマット変換 交通／宿泊 ６．タクシー／ホテル／航空券／新幹線／駐車場 進捗 ７．ガントチャート ８．タスク管理 証票 ９．見積/請求書/会計/他 １０．税金 オフィスツール １１．オンラインオフィス＋ストレージ １２．マインドマップ １３．グラフ マーケティング １４．競合調査 １５．アンケー

作成：2013/08/12 更新：2020/01/06 Web制作 > 去年、アプリをリリースしました。アプリに関する知識など全くなかったんですが、意外と簡単に出来るもんだなぁと思いました。その時はアプリを作った後、登録関係や広告など時間を取られたり、調べるだけで時間がかかったので、今回はアプリを開発するときに知っておくと素早く先に進める、作って終わりにならない「収益を発生させるまで」をまとめました。 エンジニア速報は Twitter の@commteで配信しています。 もくじ 基本 １．予備知識と事前準備 ２．実践 ３．証明書／アクティベーション ４．Objective-C　リファレンス ５．iPhone5に対応させる ６．プログラムがいらないツール 制作 ７．デザイン ８．素材 ９．UI作成ツール １０．解像度／チートシート 申請／登録 １１．アプリ申請／リジェクト回避 １２．アプリ登

TL;DR クライアントさんとの打ち合わせや会議の後は、必ず議事録を書いて社内共有します。座った位置や発言なども、思い出しながら簡潔に書きます。おかげで「何を話したっけ？」「言った、言わない」を防げてます。フリーランスの人は、見積書、請求書、契約書、法律などのテンプレや知識があると、スムーズに先へ進めます。その他、ヒアリングシート、契約書など Web 制作業でリアルで必要だった書類系テンプレや知識をまとめました。 企画／提案 １．企画書 企画書はどれくらいのコストで効果（売上）を得るかというのが一番大切。とはいえ、上司を説得できる企画書も大切。以下は企画書の作り方と資料作成サービスなどのまとめです。 [保存版] 最強の企画書の作り方と資料作成サービス完全まとめ | 世界ろぐ “通る企画書”作りの基本／上司を説得できる企画資料の作り方講座#1 | Web 担当者 Forum ２．提案書 提案

作成：2013/04/22 更新：2018/03/31 WordPress > mod_pagespeed、CSSスプライト、CDN、圧縮、プラグイン… 2013年、ページが軽いサイトが上位表示されてきました。 「検索で10位以内に入っているサイト」を仕事の関係で1日に何百件と調べるのですが、2012年よりも明らかに「1～2秒台」が増えてきてます。 10位以内には、遅いサイトもありますが1、2秒台もざらです。今回は、WordPressの高速化を手早くするために、検討したいCDNサービス、導入必須のプラグインや計測ツール、ハウツーなどをまとめました。 エンジニア速報は Twitter の@commteで配信しています。 もくじ 高速化するプラグイン １．QuickCache ２．MOCache ３．LazyLoad ４．WPSuperCache ５．DBCacheReloadedFix ６．

作成：2013/04/1 更新：2013/06/03 SEO対策 > WordPress アフィリエイトを始めたけど できることなら早めに収益をあげて 生活を少しでも楽にしたい すでにアフィリエイトで成功している人、今からの人でも、もう一度おさらいしておくと、収益の上がり方が変わってくる。 今回は、アフィリエイトの収益をもっともっと加速させるために便利なツールやノウハウ、指針にして良いサイトをまとめました。 エンジニア速報は Twitter の@commteで配信しています。 もくじ １．基本マニュアル ２．WordPress / プラグイン ３．AdSense ４．アマゾン ５．iTunes / App Store / 2chまとめ 色々 ６．Chrome拡張機能 ７．SEO ８．アクセスアップ １．基本マニュアル メールアドレスの取得から集客まで、最低限やるべきことがカテゴリ分けで記載