カテゴリー「Web」の一覧
Webサイトを公開するには何が必要か

初めてのWebサイト制作。そもそも公開するには何が必要なの?

Webに関しては初心者と言っても「少しは触ったことのある人」と「これから始める人」では異なるように、人によって知識や理解に差があります。Webサイト制作も同じで発注者の理解度は様々なので、受注者はわかりやすく説明できなければいけませんが、発注者にも最低限の知識は必要です。という訳で、今...

CMSから静的サイトジェネレータによる運用に切り替えるのは、まだまだ世間受けしにくいという話

以前書いた「デザイナーも静的サイトジェネレーターが使えた方がよいのではないか」の記事が最近よく見られているので、追い記事を書いてみようかと思います。静的サイトジェネレーターはお客様サイトに使えるのか前回記事で紹介したように、このブログは「middleman」というツールを使って静的サイ...

店舗のホームページ制作

実店舗を持つ業種のホームページ制作に必要なこと

自サイトのアクセスが少しずつ増えてきたことで、新規案件を依頼される機会も増えてきました。これまで紹介案件に頼りきりだったので、検索してたくさんある中から話を聞いてみようと思っていただけることは嬉しい限りです。でも、全ての案件を受けることはありません。日程の都合上、希望の納期ではできないとい...

検索上位表示への取り組み

検索上位表示に取り組んで気づいたこと

ブログ開始して 1 ヶ月で◯◯万PVを超える凄腕ブロガーさんには遠く及びませんが、運用開始から苦節 5 ヶ月で目標にしていた月 1 万 PV の壁に手が届くようになりました。アナリティクスのリアルタイムでも 2 桁の数字が表示される時があり、涙が出そうになるほど嬉しく思ったりもします。私...

JavaScript と jQuery への理解

【初心者向け】JavaScript と jQuery を混同しているあなたのために

この記事は、Javascript と jQuery の違いがイマイチよく分からないといった初学者や触り始めて間もない人を対象にしています。私「サイト構成、ページデザインを見ると JavaScript で動きをつける部分は少なく、その箇所も高難易度ではないのでコード量も多くならないと思います...

レスポンシブデザインのメディア

レスポンシブデザインで使うメディアクエリの設定方法とブレークポイント最適値について

スマホファーストでおまけ的にPC対応という案件が以前よりも増えていますが、やっぱり多いのはPC優先でスマホ表示も確保するというもの。で、このような複数デバイス間の表示を最適化する手法としては以下のものがあります。モバイル用とデスクトップ(PC)用を別々に用意してアクセスする端末で切り替え...

Andorid Chrome

【小ネタ】theme-colorタグでAndroidのChromeのタブ色を変える

ここ最近、いろんなWebサイトを見ています。いつにも増して見ています。手元にiPhoneとNexus6を置いているので、それらも駆使して見ています。そんな中、AndroidのChromeで閲覧していると、アドレスバーが通常と異なる色になるサイトがいくつかありました。どうしても試してみたくな...

Chrome extension

Web制作に関わっているならおすすめのChromeの拡張機能7選

Google Chromeの利用率は世界規模で見ると1位で、このサイトでも48%程度あります。自分も長年使い続けていますが、9月に最新版のバージョン45になって、タブをたくさん開くと消費メモリーが多くなる問題がやや改善された気がします。ただ、1点解決できないことがあり、フォーム内のテキスト...

Hatena Design Hour in Kyoto

Hatena Design Hourで再確認。デザインにはコンセプトと指針が重要。

Hatena Design Hour #2 in Kyotoに行ってきました。このイベントの趣旨は「デザインを見て、デザインを学ぶ」こと。なので、デザイナー目線でのWebサービスの開発経緯や概要、デザインの考え方といった話が主です。で、スピーカーの皆さんが共通してプレゼン内でお話しされていたの...

SCSSでコントロールディレクティブを使う

初心者のためのSCSS。条件分岐のif文、反復処理for文などを使ってみよう。

SCSSを導入しようかと検討する際に、このブログの記事を参考にしてくれた奇特な方が居たそうな。どうもありがとう。で、声をいただくと書かない訳にはいかないので、条件分岐のIf文と反復処理の構文に絞った内容で書いてみようかと思う次第です。SCSSとはCSSの拡張言語です。長くなったり、...

ハンバーガーメニューはもういらない

顧客視点で考えた結果、ハンバーガーメニューをやめました

昨日私はハンバーガーを食べました。モスバーガーのオニオンリングが私の好物です。そして、このサイトではハンバーガーメニューをやめました。お客様のサイトを含め、このサイトでもハンバーガーメニューのクリック率が悪かったことが原因です。ハンバーガーメニューはUIとして良いのかGIGAZINE...

middleman blog

middlemanでブログを作ろう。インストールから初期設定まで(slimも少々)

Wordpressで始めたブログを管理画面がいらないという理由で静的サイトジェネレータのmiddlemanに乗り換えて早3ヶ月。CMS案件やWebアプリケーションのHTML/CSS制作にmiddlemanを使っていたのですが、ブログ機能はこの移行で初めて取り組みました。今回はこのブログ機能に絞って書いていきます。というわけで、以下のような方におすすめの内容でお届けします。middlemanを使ったことがある方middlemanでブログを作りたい方middlemanでのブログ初期設定をやろうとしている方なんとなく見てしまっているという奇特な方 ← どうもありがとうmiddlemanを初めて使う方は、まずは過去記事をご覧ください。インストールからサーバーの起動までブログサイト制作するには、上記ページ内のmiddlemanを起動してみようのスケルトン作成の箇所に補足として記載している、$ bundle exec middleman init --template blogをターミナルに入力し、ブログテンプレートの初期ファイルを作成します。(後述します。)レイアウトとパーシャルについて今回はあまり触れませんが、ここも見ておくと良いかも。開発環境を用意する過去記事のインストールからサーバ起動までのインストールしてみようを行った上で進めていくのが理想ですが、念の為に再掲しておきます。すでに初期セットの作成が完了している方は飛ばしていただいて大丈夫です。ブログ用の初期セットを作成するmiddlemanのインストールが完了していると、下記のようなディレクトリ構造になっています。この状態では、middlemanが使えるようになっただけで、スケルトン自体は生成されていません。生成するにはmiddleman initを行うのですが、今回はブログを作るのでgem "middleman-blog"をGemfileに追加しておく必要があります。source "https://rubygems.org"gem "middleman"gem "middleman-blog"追加後は、有効にするためにbundle installを実行します。middleman-blog は middleman の拡張機能でタグや記事抽出などブログに必要な機能を提供してくれます。middleman-blogをインストール後はbundle exec middleman init --template blogでスケルトンを作成します。もしかすると、Could not find gem 'builder (~> 3.0) ruby' in any of the gem sources listed in your Gemfile or available on this machine.のエラー(赤字)が出るかもしれません。これは、gemのbuilderが見つからないと言うことなので、Gemfile にgem "builder", "~> 3.0"が追加されているかvendor/bundle/ruby/ 以下にbuilderがあるかを確認し、無ければbundle updateしておいてください。ここまで来れば、bundle exec middlemanでサーバを起動してブログの初期セットを確認します。ブラウザから http://localhost:4567 にアクセスし、以下のページが表示されていれば、初期セットが正しく生成されています。復習のつもりが長くなりましたが、ここからブログの設定作業です。現状の初期セットではあまりにも簡素で、ディレクトリ構成もちょいと使いづらそうです。なので、以降は下記の2点について記載していきます。config.rbでカスタム設定Slimの初期セット生成config.rbで自分だけのカスタム設定config.rbは設定ファイルで、以下のような内容を設定することができます。ブログ設定ディレクトリ設定リンクパスの設定ビルド時の出力形式公式サイトにはヘルパーや相対パス設定など、他にもたくさん紹介されていますが、ブログ作成という観点で上記をピックアップしています。前項で実際に生成された config.rbを見ながらご覧いただくとわかりやすいと思います。ブログの設定activate :blog do |blog|...endactivate :blog do |blog|からendまでの内容がブログ設定の記述箇所となり、ここを適宜変更したり、有効化していくことで詳細に設定することが可能となります。#はコメントアウトとなり、これを外すと設定を有効化できます。↓ サンプルとして自分の設定内容を掲載しました。activate :blog do |blog| blog.prefix = "blog" blog.permalink = "{category}/{title}.html" blog.sources = "{year}-{month}-{day}-{title}.html" blog.taglink = "tags/{tag}.html" blog.layout = "layouts/layout" # blog.summary_separator = /(

初心者のためのSCSS

初心者のためのSCSS。変数とパーシャルを覚えて統一性のあるコードを書こう

ハンバーガーメニューを使っているサイトをよく見かけますが、見た目先行で効果が出にくいようです。GIGAZINEの記事 - なぜメニュー表示用ボタンの「ハンバーガーアイコン」はダメなのか?クライアントにハンバーガーメニューを実装して欲しいと言われることもありますが、ターゲット層によっては...

CSS flexible box(フレキシブルデザインボックス)

Flexboxを使いこなして柔軟過ぎるCSSレイアウトを実現しよう。

毎朝アクセス解析を見ていると、IE8 以前のバージョンからの流入が激減しており、喜びを隠せない日々を過ごしています。実際、クライアント先の学習塾の 4 月から 7 月の IE だけの平均を見ると、IE9 が 10%、IE11 が 75%、残りが IE7、8、10 という割合です。そして、IE...

scss

初心者Webデザイナー・コーダーこそSCSSを使ってみよう。

久しぶりにWeb関連の話題を。初心者デザイナーはcssやhtmlを書くのが苦手、初心者コーダーも感覚的に作成されたデザインを見ると辟易する、ということはないでしょうか。ちなみに私は、超感覚なデザインファイルを送られると、壮絶なダメ出しをします。自分が思うに、cssが苦手、難しいと思うの...

軽量CSSフレームワーク「Skeleton」

必要な分だけの構成。CSSフレームワークは軽量でミニマルなものが良い。

Chromeの拡張機能で、Wappalyzer というものを使っておりまして、閲覧しているサイトがどんな言語や仕組みで構築されているかをよく見てます。アドレスバーの右端にアイコンが表示されるので、これをクリックするだけで丸わかりです。このWebサイトは上の画像のように少量構成ですが、Wordpress...

HTMLのアウトライン

内的SEO対策をするなら、アウトラインを意識したHTMLマークアップも行おう

SEO と言えば、ページタイトルやキーワード、被リンク、サイト内リンク、ディレクトリ構造など対策すべきところはたくさんあり、日々試行錯誤と修正対応の繰り返しです。今回は、その中からHTMLマークアップに着目してみようと思うております。なぜ?? HTMLマークアップが大事な理由クロールし...

Adobe Brackets

Photoshop 使いは、Brackets でコーディングが楽になる!? 初心者のためのテキストエディタ。

先日は「初心者のためのテキストエディタ。迷ったら Atom がおすすめ。」にて Atom が良いと申し上げましたが、「他のやつも紹介せい!」とのお声をいただきまして、そう言われると次に紹介できるのはこれしかない。ということで、Brackets についてです。Adobe製のオープンソースのテ...

Github Atom

初心者のためのテキストエディタ。迷ったら Atom がおすすめ。

ここ最近、Web デザインや HTML / CSS コーディングをこれから始める方や始めて間もない方に相談される機会が結構ありまして、今回はその中でもよく聞かれる「テキストエディタは何がおすすめですか?」についてのお話。種類や情報過多で選べないGoogle様に「テキストエディタ」につい...

キーワード検索順位

その検索結果は本当に正しい!?キーワードの検索順位の調べ方を再考する。

新しくなったGoogleトレンドでリアルタイムで人気のキーワードを閲覧しやすくなりました。こういったトレンドを見て話題を拾ってくる人もいるのではないでしょうか。さて、今回は検索の順位についてです。Googleは常に検索結果の品質改善を行っていて、その結果順位変動をくらうサイトも少なくあり...

アナリティクスのポイント

Web担当者じゃない人がアナリティクスで見るべきポイント5つ

iPhoneでもAndoroidでもアナリティクスの公式モバイルアプリがあるので、気軽に詳細な解析データを見ることが可能になりました。それでもWeb担当者ではない人やそんなにアナリティクスに慣れていない人にとってはまだまだとっつきにくいツールかもしれません。なぜとっつきにくいのかリテラ...

TweenMax

ハイパフォーマンスなアニメーションライブラリ TweenMax を動かしてみる。(デモありのコード多め)

タイトルが横文字ばかりになってしまいました。朝からAppleが「iOS 9」でGoogleのAndroidからコピーした機能まとめを見て、「おい、Apple!!」と思わず顔をしかめてしまいました。特にMapの今更感は半端ない気がします。書きたい内容がたくさんあるのに、なかなか書けず焦っ...

Remote Debugging

知らないと損!?Remote Debuggingが個人的にすごかった件。

小ネタです。Androidを使いこなしている人や制作者にとっては知ってて当然らしいのですが、Androidを使い始めて1ヶ月半の自分にとっては目からウロコでしたよ。ChromeでAndroidのデバッグができるモバイルをベースに制作する案件が多い方でこの設定を行っていない人はやった方...

静的サイト制作

静的サイトを効率よく制作する。- middlemanを使ってみよう vol.1

このブログはmiddlemanを使って構築しました。middlemanは日本語リファレンスがある静的サイトジェネレータです。企業向けのサイト構築に特化しているようなのですが、gemを追加することでblog機能を追加することができます。gemはWordpressで言うプラグイン的なものですね。...

Github Pagesへの移行

WordpressからGithub Pagesに意外とすんなり移行できました。

きっかけは今の制作環境少し前にWordpressからmiddlemanにサイトを移行しました。クライアントワークなら問題ないのですが、自分用にはWordpressは必要ないなと思ったためで、大きくは以下3点の理由です。1. 管理画面いらない記事書いて、中身を定期的に変更するだけなの...

CNAMEの設定

sqaleでCNAMEレコードの設定をする - はじめてのWordpress

wordpress 案件でサーバに Sqale (スケール) を使うことになり、この設定は難しくなかったのですが、今回初めてCNAME レコードなるものを触ることになりました。今までこういうことは別の人に任せていたので苦手感満載です。なので、同じような境遇の方に向けて、アプリケーション作成か...

Wordpressを動かす

Wordpressをローカル開発環境で動かす - はじめてのWordpress

Wordpress は Web 運用を便利にする CMS です。今回は Wordpress の導入と開発環境の準備についてまとめました。そもそもWordpressとはWordpressとは、オープンソースの CMS プラットフォームで PHP をベースに構成されています。CMS とは、...