2015.08」の記事一覧
Sketch Mirror

Sketch3を使うならモバイル用デザインに最適なSketch Mirrorも一緒に使おう。

「モバイルサイトやアプリのデザイン案件が増えています。」という方が多いのではないでしょうか。私もその内の一人です。それは、Googleは2015年4月21日からスマホでの検索結果の仕様を変えて、ウェブサイトがスマホ用に最適化されているとモバイルでの検索結果に優位に働くようになったからです。

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 = /(

オススメのガジェット

今年買った、自信を持っておすすめできるアイテム3選。(少ないけど)

Withings Activite Pop関連の検索が相変わらず多いのですが、実はそれと同じくらい活用しまくりのガジェットやアイテムがあることを思い出しまして、今年に入って買ったデバイスやその関連アイテムでおすすめできるやつだけ公開してみます。(絞ると3つだけになってしまった……。)スマー...

初心者のためのSCSS

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

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

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

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

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

Withings Activite Pop

Withings Activite Popを1週間使ってみた感想。

Withings Activite Popを購入したので、「スマートウォッチはこれでしょ。やっと日本で発売されたWithings Activite Popを購入。」というレポートを書いたら「Withings Activite Pop」でかなりの数の検索流入がありました。で、今回は1週間経っ...