WEB制作の記事一覧 - ヤマダコウタドットコム

WEB制作の記事一覧

[CSS]横並びボックスのテキストを上下中央に揃える方法

CSSを使って横並びレイアウト

CSSを使って、横一列に並んだブロックのテキストを上下中央に揃えてレイアウトしたい場面ってありませんか?

同じ文字数(行数)で揃っていれば特に問題ないのですが、1行だったり2行だったりバラバラのときに高さが揃わないとなんだかデザイン的にも気持ち悪いです。

Bootstrapのcol-*とかを使っていて、このやり方がいつもわからなくなるので。

HTML

 

 

 

テキストテキストテキストテキストテキスト

 

 

 

テキストテキストテキスト

 

 

 

テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト

 

 

 

CSS

簡単ですね。

親要素にdisplay:table、heightで高さ指定、子要素にdisplay:table-cellとvertical-align:middleでいけます。

デモはこちら

この本はとても読みやすく重宝しています。紙の本とKindleに入れて読んでます。

WordPressもサクサク動くレンタルサーバー「ヘテムル」が良い

レンタルサーバーはどこの会社を使っていますか?
世の中にはたくさんのレンタルサーバーがあり、WEB関係の仕事をしているとサーバー選びもなかなか大変だったりします。

最近のサーバーは低価格ながら高品質なものも多いようですが、僕自身は最近になってヘテムルを新たに契約しましたので、その紹介をしたいと思います。

続きを読む

Mac OS X 10.9 Mavericks にアップグレードすると、Adobe製品のショートカットキーが利かなくなった問題を解消する方法

Mac OS X 10.9 Mavericksにアップグレードすると、
PhotoshopなどのAdobe製品のショートカットキーが一切利かなくなりました。
(というよりも全てのショートカットが「⌘+1」となっている)

これはWebデザインなどで24時間中18時間くらいPhotoshopを立ち上げてる人間としては困って困って仕方ありません。

作業効率も落ち、(ただでさえ遅いのに)通常の3割増で時間がかかります。

解決策を探してぐぐってみると、OS再起動で改善すること改善するかもとの情報を見たのでさっそくやってみると、

改善せず。。。。

困った結果、Photoshop CS6のバージョンを見てみると13.0となっている。
試しにソフトウェアアップロード探してみると13.1というのがあってやってみた。

すると無事改善!!

ショートカットが使えないって本当に不便ですね。

⌘+zすら使えず、ヒストリーでちまちま戻りながらしばらく作業するという地獄の日々でした。

同じように困っている方の参考になればと思います。

【WP初心者向け】WordPressにGoogleAnalyticsを簡単に導入する方法

WordPressでブログを立ち上げるにあたり、最初にやることはいろいろとありますが、やはり気になるのはサイトへのアクセス数です。

アクセス解析といえば有名なのは「Google Analytics」
最近また少しUI変わった気がしますが、無料でこれだけ高機能のアクセス解析ができるのはありがたいことです。

続きを読む

問い合わせフォーム改善|煩わしい日付入力をjQueryプラグインで解決!

問い合わせフォーム改善|煩わしい日付入力をjQueryプラグインで解決!先日飲食店サイトの予約フォームの改善のお手伝いをさせていただいた際にとても便利なjQueryプラグインを発見しました。

ユーザーが問い合わせフォームをいかに簡単に、確実に入力できるか

問い合わせフォームの改善はコンバージョンへ直結する重要な役割を果たします。
私が相談を受けた飲食店サイトは下記のような問題を抱えていました。

  1. 入力フォームの文字が読みづらい
  2. 入力項目が整理されておらず、離脱率が高い
  3. 自動返信メール機能がなく、ユーザーが不安になり電話で確認することが度々発生

1.入力フォームの文字が読みづらい

まず基本的な部分で、とにかくテキストが読みづらいフォームでした。
問題としては、

  • 黒の背景にグレーの文字色(コントラスト弱い)
  • フォントが明朝体である
  • フォントサイズが12px(小さい)

これらは見るに明らかな問題点なので、背景色とテキスト色のコントラストをはっきりさせ(テキスト色を白にしました)、明朝体をゴシック系に変え、フォントサイズを14px程度まで大きくしました。

入力項目が整理されておらず、離脱率が高い

ユーザーが入力フォームページヘ来る理由は来店の予約をするためです。
その割に不要な入力項目が多くありました。例えば性別、住所、など・・・。
そして入力フォームの定番であるメールアドレス確認用(記入したメールアドレスが間違いないかもう一度確認する項目)です。
しかし、記入必須項目として電話番号があることと、飲食店という業態からユーザーはスマートフォンからのアクセスも多いため、思い切ってメールアドレス確認用を外すことにしました。
(もしメールアドレスが間違っていてメール送信ができなかった場合は、電話をかけて確認すれば解決するという結論から)
最終的には

  • 名前(必須)
  • 電話番号(必須)
  • メールアドレス(必須)
  • 予約希望日時(必須)
  • 来店人数(任意)
  • その他要望(任意)

と、いたってシンプルなフォームに変更。

自動返信メール機能がなく、ユーザーが不安になり電話で確認することが度々発生

これも大きな問題ですが、自動返信メール機能がないため、入力フォーム送信完了後、ユーザーは「ちゃんと遅れてるのかな・・?」と不安になった経験ってないですか?
このクライアントの場合もこのケースで、不安に思ったユーザーが電話をかけてきて「ちゃんと予約できてますか?」と確認してくるんです。
これでははっきり言ってWebサイトで予約フォームを使う意味が全くありません。
自動返信機能(後日こちらもおすすめツールをアップします)を付けることにより解決。

すべて基本的な部分ですが、このクライアント様が抱えていた問題はおそらく大部分を解決できると思います。
予約フォームでの離脱率を減らし、コンバージョン率を上げることで集客をアップすることにつながればいいと思っています。

煩わしい日付入力をjQueryプラグインで解決!

前置きが長くなりましたが、入力フォームの改善がとにかく「ユーザーにストレスを与えない」ことだと考えています。
その中でも日付の入力をいちいち手入力するのは非常に面倒なものです。
生年月日を入力するのも同じですが、年・月・日がそれぞれリストダウンになっていて、選択するという方法が一般的かと思います。

このクライアント様で採用した方法はカレンダーから直接日付を入力するというもので、
それを簡単に実現させたのがjQueryプラグイン「pickadate.js」です。

設置も簡単で、設置方法についてはこちらのエントリーを参考にさせていただいきました。

おそろしく簡単にカレンダーを表示できるjQueryプラグイン「pickadate.js」

デフォルトでは英語表記になっていますが、jsファイルを多少いじれば日本語表記に変更も簡単にできます。
方法については割愛しますが、コメントか@web_mktrまでメッセージいただければアドバイスできますのでお気軽に。

入力フォームに日付入力欄を設けている方はぜひ一度試してみてください。

WordPress無料テーマ「Stinger」

ブログを開設して、1年と少し経ちました。

記事数も少ないのでパラパラと読み返してみると、改めてその当時日常で感じたことを書き綴っていくことの面白さを再認識したので、再開してみようかと思いました。

Webマーケティングに携わる身として、いかにして”アクセスを集める“かに焦点を当て、日常の業務から感じたことを気の向くままに書いて行こう。

WordPressテーマの設定

まず初めにとりかかったのは、WordPressのテーマ設定です。
私は中小・零細企業向けにWebマーケティング支援をしながら、Webサイトの製作業務も依頼があればやっています。
当然WordPressで構築することも多く、最初は勉強を兼ねて「オリジナルテーマにチャレンジしてみるか!」なんて思いましたが、あんまり最初から張り切りすぎるとその後が持続しないだろうという結論に至り、無料で配布されている高品質テンプレートを使わせていただくことにしました。

今回使わせていただいたテーマは、Stinger(スティンガー)という、アフィリエイトに特化したテンプレートを使わせて頂きました。(作者の方、ありがとうございます)
今回のブログではアフィリエイトはあまり考えていませでしたが、シンプルなデザインでカスタマイズもしやすそうだったので選ばせていただきました。と、言いつつも広告もしっかり貼ってますけど、なにか?(笑)

ついさっき設定を終えたばかりなので、まだヘッダー画像と変えたくらいしかできてませんが、これからちょこちょこといじっていくのが楽しみです。

Illustrator Design Method

今までデザインソフトは独学だったので、基本から勉強し直そうと思い、まずはIllustratorからと思い、以前webデザイナーの方から紹介していただいた井上のきあさんの「Illustrator Design Method」も購入しました。

こちらはシリーズでPhotoshop版も書店に並んでおり、2冊購入することも考えましたが、ひとつずつインプットして次の書籍に進んだほうがいいと思い今回はIllustratorだけ。

さっそく数ページやってみましたが、とても参考になります。

星をひとつ描くにしてもいろいろな方法があることを確認できます。

「なんとなくはわかっていたけど〜」という方には正に必須の教則本になるのではないでしょうか。

本日学んだこと

      長方形や正方形を描く
      楕円形や円を描く
      菱形を描く
      台形を描く
      直線を描く
      波線をつくる
      点線をつくる
      角丸長方形を描く
      テレビフレーム(樽型長方形を描く)
      タマゴを描く
      星を描く
      正三角形やそのほかの正多角形を描く
      星を散りばめる
      ハートを描く
      クロスハッチを描く

webサイト制作の講師をして感じたこと

最近はいろいろなお仕事をさせていただいているのですが、その一つとしてweb制作スクールの講師をさせていただいています。

受講生の皆さんは3ヶ月間でデザインソフトの習得、HTMLなどの記述、デザインの基礎知識を学び、最後の1ヶ月で実際にwebサイトを制作するという流れなわけです。

で、今日は卒業制作の発表をしていただきました。

1人あたりおよそ30分の持ち時間で、みんなの前に立っていただき、プロジェクターに投影された自分のwebサイトをプレゼンしていただくのです。

本人がプレゼンしたあとに、同じ立場である受講生が第三者としての意見を発言してもらいます。

もちろん賞賛する意見もあるのですが、ここで大事なのは「どれだけ辛口な意見を出させることができるか」です。

webデザインは制作者の想いが一方通行になりがちです。

制作に没頭していると、いつの間にかユーザー目線に立つことができなくなり「デザインはいいんだけど、ものすごく操作性が悪いサイト」パターンにになりがちです。

しかもデザインソフトをある程度使えるようになった頃というのは、デザインに意識が行き過ぎて、制作者の自己マンになっているなんてことがザラにあります。

僕はwebデザインは戦略手段のひとつと考えています。

「見た目がきれいなサイトを制作する」のが本来の目的ではなく、

「ユーザーが使いやすいレイアウトをデザインする」または「目的(商品を売る、問い合わせをしてもらう等)にたどり着きやすいようにナビゲートしてあげる」ことががwebサイトを制作する人間に求められるデザインスキルだと思います。

今日受講生の皆さんが制作されたサイトはどれも素晴らしいものでした。

とても3ヶ月前までwebデザインなんて全くしたことがない人間が制作したものとは思えないくらいです。

しかし、改めてデザインの必要性や、本来あるべき姿を受講生の皆さんに教えて頂いた1日でもありました。