制作実績に「社労士げんき労務事務所 様」を追加しました。

社労士げんき労務事務所 様は
業界内でもかなり早い時期にホームページを開設し、運営されていました。
当初はホームページを持つ企業が少なかったため、
反響も大きくその重要性を感じられていたのですが、
更新作業をほとんど行っていませんでした。

また、お問い合わせフォームのプログラムがエラーを起こしており、
実質訪問者からのお問い合わせが出来ない状態でもありました。

アミットではホームページのリニューアルなどを依頼された場合、
現在のサーバーの仕様、既存のプログラムの動作確認など細かく調査してから
請け負うことにしていますので、
データだけを作成し納品してしまうことはありません。
サーバーによっては動かないプログラムもありますので、
多少時間がかかっても充分な調査とテストを行います。

サーバーも現在使用中のところが問題ないものであったら、
レンタルサーバーでメールもご使用のお客さまも多いので、
そのままご使用いただいております。
もちろんアミットでサイトの規模などを考慮し、
ご紹介させていただく場合もあります。

今回リニューアルに際して、ユーザーの立場から必要なコンテンツも提案し
採用していただきました。
より訪問者が利用しやすくなっていると思います。

今後はコンテンツの充実や更新作業
検索キーワードのご提案などしっかりサポートさせていただくことになっています。

ami-to「制作実績」のページはこちらから »
社労士げんき労務事務所 様のホームページはこちらから »

制作実績に「株式会社L&Bソリューション様」を追加しました。

株式会社L&Bソリューション　様は
ホームページの実質的な更新が2年前で止まっており、
問題視しつつもそのままにしていたとのことで調査してみると、
様々な問題点が浮き彫りになりました。

トップページにFlashムービーを採用しており
iPadやiPhoneなどからの閲覧時には表示されない状態であったこと。

各ページの画像による説明に一切の説明文（alt）が挿入されておらず
検索にかからない状態になっていたこと。

各種お問い合せページがSSL（暗号化通信）に対応しておらず
セキュリティ的に問題があったこと。
またこのお問い合わせフォームのプログラムが古く、
IE10以降だとデータが送信されず、
お問い合わせが完了しない状態であったこと。

今回、これらの問題点を全て解決し、
より安全で検索にかかりやすいサイトに改善させていただきました。

今後はコンテンツの充実や更新作業
検索キーワードのご提案などしっかりサポートさせていただくことになっています。

ami-to「制作実績」のページはこちらから »
株式会社L&Bソリューション様のホームページはこちらから »

ブルーライト対策について

Web制作などを仕事にしていると1日中PCのディスプレイを眺めていることもしばしば。
仕事終わりには目が疲れ、周りが霞んでしまうこともありますね。

最近では仕事外でもスマートフォンなどをずっと使用している人も増え、ブルーライトによる目への影響が深刻となり対策商品も次々発売されています。
PCメガネやブルーライトカット液晶保護フィルムは使用して1ヶ月ほど経つと「疲れが軽減されたような気がする」という方も多いようで、ネット上で色んな声を聞くことができます。

text-indent:-9999pxを使わない画像置き換えの方法

昨年の秋からGoogleでパンダアップデートやら、ペンギンアップデートやら
リンクペナルティやら色んなことが盛んに行われており、
サイトの順位が下がっちゃって大変な思いをされている方も多いと聞きます。

ami-toが管理しているサイトは運良く（ちゃんと作ってたと言うべき？）
これらによる順位の変動は無かったわけですが、
前々から気になっていたCSSの使い方があったので
ここいらで何か他の手はないものか探してみるとありましたよ。
今回もネットの先輩たちに感謝しつつ紹介したいと思います。

その前に、
text-indent:-9999px;
って何かというと、タイトルとかの画像を表示しているんだけど、
HTML上ではテキストになっているので結構長い文章でも入れちゃえる手法なんです。

スマートフォンサイトとレスポンシブWebデザイン

現在、スマートフォンサイトの制作の準備をしています。

私が管理しているサイトは業界的にまだスマートフォンからのアクセスはさほど無いんですが、準備は進めるべきだということで色々調べています。

そんな時タイムリーなセミナーを受講することが出来ました。
「レスポンシブWebデザイン企業導入入門セミナー」というものです。

レスポンシブWebデザインは、1つのHTMLで各デバイスに最適なCSS＆Javascriptを自動的に切り替えて表示させる技術のことで、今までのPCサイトの製作方法とはかなり異なるものです。

HTML5 & CSS3について

世の中の進化よりWeb業界の進化の方が早いと感じる今日この頃です。

いよいよHTML5が2014年に正式勧告される訳ですが、未だブラウザによって対応しているタグが異なったり、古いバージョンのブラウザではエライことになったりと実際に使用するには色んなハードルがあります。

ami-cafe 新商品追加！

実はアミットではネットショプもやっているんです。
女性のための生活応援情報発信サイト ami-cafe　といいます。

ami-cafe URL　http://www.ami-cafe.jp/

もとは前任者がネットショップの何たるかを勉強するためのサイトだったらしいのですが
ショッピングカートは既存のASPを利用したしっかりしたもので
カード決済や代引きにも対応しておりますので、
機能的にも全く問題なく運営できています。
こちらも近々リニューアルする予定です。

そして昨日、新商品を登録しました！
タイで人気のブランド「NaRaYa（ナラヤ）」の新作バッグです。
NaRaYa（ナラヤ）のバッグといえば
サテンキルティング地に大きなリボンがついたものが日本でも有名ですが
昨年あたりから「デニムシリーズ」や「キャンバスシリーズ」が現地で売り出され
注目されています。

特に今回入荷したバッグはどれもデザイン的に素敵なものばかり！
オールシーズン使える「デニムシリーズ」と
これから大活躍しそうな春夏にピッタリの「キャンバスシリーズ」を
多数登録しています。

バッグの中の色も外観と統一されているなど、
細かいところまで気を配られた仕上がりです。

昨日入荷してすでに売れてしまっているものもあります！
スタッフが狙っているバッグも数点あります（笑。
すべて1点しか入荷していませんので
興味のある方はお早めに！

明けましておめでとうございます

新年　明けましておめでとうございます。
今年もよろしくお願い致します。

すでに仕事始めから数日経過していますが（笑。

今回の年末年始休暇は結構長かったので
色々やろう！と思っていたのですが
結局はのんびりと過ごしてしまいました。
それも良いかな、と。

実は昨年、趣味の団体で運営していたホームページで
大変なことが起こりました。
このホームページの運営に全く関与していなかったので
事が起こってから慌てて対応ということになったんです。

キーワードの大切さ

Webサイトというのは閲覧者がいて初めて成り立つものですよね。
アクセス解析で毎月どの程度アクセスがあったかとか
どのページが一番閲覧されたとか
どのページから見始めたとか
どのページで離脱していったとか
そしてどんなキーワードで検索されて訪れたとか。

ホームページリニューアルしました♪

本日、ami-toホームページをリニューアルいたしました。
奇しくも大安吉日！ いやー縁起が良いですねぇ。

今回はロゴも新しくなっているので
かなりイメージが変わったと思います。
テーマカラーはちょっと彩度と明度を上げて明るい感じに。
作りはあくまでもシンプルにと気をつけたつもりです。

まぁ、デザインはともかく
コンテンツも若干増やしてより充実したサイトにしました。
また色々見なおしてもっともっと、良いサイトに育てていきます。

http://www.ami-to.co.jp/

今後ともよろしくお願い致します。

ホームページリニューアル中♪

ami-toの担当者となって早数ヶ月、
その間ずっと気になっていたんですが後回しにしていた
ami-toのホームページをリニューアルすることになり、
現在作業中なのです。

より明るい感じで、親しみやすいデザインにすべく奮闘中です。

IE６にはホントに悩まされる その2

はい、IE6以前のバージョンさえこの世から消えてくれれば…
WEB製作に携わる人の大半はかなりハッピーだと思いますっていうお話です。

サイトにおいて、XHTMLでは「XML宣言」をすることが強く推奨されています。
<?xml version="1.0" encoding="UTF-8"?>
というヤツですね。

今回プチリニューアルしたサイトでももちろん挿入しました。
するとIE6でレイアウトが崩れ倒しまくり！！！
すぐさまググってみると世の中の皆さんは結構苦労されてました。

閉じタグはちゃんと入れましょう、基本だよ

サイト修正をやっているんですが、
正直新規で作成するよりコーディングが厄介な時ってありますよね。

もういない担当者が作ったサイトを触るのは慣れっこになってしまっているんですが
今回のは結構イタイ内容でした。

tableタグでは

<tr><td>セルに入れたい内容</td></tr>

って書きますよね、ふつー。
今回のサイトには</td></tr>が無かったんですよ、半分以上。
いや、最近のブラウザは頑張って表示してくれますよ。
でもね、基本的な記述としてはちゃんと閉じタグを入れて欲しいなぁって。
そういうのが多数。

あと<br>と<br />の混在とか。
まぁ、これはたまにやってしまう時はあるんですけどね。
閉じタグが無くて、レイアウト崩れているページが放置されているとか。
アップロードした時に確認するでしょ、ふつー。

その上、そのままのCSSで文章を追加していったらレイアウトが崩れてびっくりとか。

色々検証した結果今やり直さないとこの先ヤバいということに。
修正がプチリニューアルになりました。
怖いので書き直せるところは全部かきなおしましたよ。
だって、このサイトこれから私が面倒を見ていくことになるんですもん。

別に自分がコーディングに長けているとは思いません。
もっと綺麗でシンプルなコーディングする人はいっぱいいると思うしね。
私は基本的なコーディングしかできないんですから。
でも一応気を使ってやってるつもりです。

他の人が触ることもあるから、 なるべくシンプルで分かりやすいコーディングをしよ、
と改めて心に誓ったのでありました。

phpMyAdmin 慣れてません (^^;)

ほんの少しだけWebプログラムをスクールで勉強した経験があるんですよ。

PHP、Javascript、MySQL というWeb制作には欠かせないものなんですけど
実はMySQLを勉強したときは、すべてコマンドプロンプトで操作していたんです。
自分のマシンにPHPやMySQLをインストールしてやってたんで
それはそれで簡単ですが、
レンタルサーバーだとデータベースの操作はphpMyAdminでのみ
行うところがほとんどなんですね、やっぱり。

会社で借りてるレンタルサーバー内のデータベースに
あきらかに今使われていないものを発見したので
全部中身を確認して、いらないものは削除してしまおうということになったんですよ。

よくある、昔の担当者の遺物ってヤツです。

コマンドプロンプトなら、その場でダンプのSQL文書いてしまえば良いのですが
phpMyAdminでは「エクスポート」のページで、
必要項目にチェック入れて「ファイルに出力」→「実行」という流れになります。
このチェック項目、どれにチェック入れて良いやらよく分からん。。。

というわけでネットでphpMyAdminの使い方を色々調べて
無事全データベースのエクスポートが完了しました。

勉強するときにコマンドプロンプトって人、今は少ないんですかね？
実はサーバーの会社の方に「コマンドプロンプトで操作できないんですか？」
って聞いたら、「そっちの方が高度なんですよ」と言われました。
だってそれしか知らないんだもん。
世間ではphpMyAdminの使い方知ってる方が高度だと思う、と
心のなかで呟いたのでありました。

ショッピングサイトのシステム

仕事柄、様々なショッピングサイトのシステムを経験してきたんですけど
今回初めて触っている「ショップサーブ（Eストア）」には、
新たに悩まされています。

商品台帳の登録項目の分かりづらさ、
全体のデザインテンプレートの反映の方法とそのカスタマイズをする場合における
切り替えするときの疎ましさ。
何でこんなに1つのことしたいのに、設定の場所があちこち分かれているんだ。。。

もう、こうなったら基本テンプレートだけ選んで
すべてカスタマイズ設定する方が楽だなぁと思いました。

実際に運営しているショップサイトなので
そのタイミングはかなり考えなければなりませんが
そこをやっとかないと後々もっと面倒な事になりそうで。。。

そういえば、このあちこち感、
ちょっとだけ触ったEC-CUBEでも感じたと思いだしました。

Yahoo、楽天、ライブドア、カラーミーなどを先に触ってきたので
そちらで慣れてしまっていたんでしょうね。

もしかしたら、この構造の方がショッピングカートシステムでは主流なのかも。

まだまだ勉強が足りないなぁと思ってます。

PowerPoint 勉強中

ホームページを制作する際
どのような内容にするのか、ページ構成は、カラーは、
などヒアリングをもとにまとめた企画書を作成します。

以前は企画書もIllustratorで作っていたんですが
ページ数が多かったり、Excelデータの挿入や変更などを行うこともあり
PowerPointを使って作るようにしています。

このPowerPointって普段Illustratorを使っている側からすると
結構クセがあるんですねー。

きちっとしたテンプレートを作成してから作ればいいんですけど
テンプレートはアバウトに作っておいて
掲載する内容によって文字の大きさや表示位置などを変更すると
さっき変更したトコロが何故か小さな文字に変わっていたり
資料としてPDF出力すると、ちょっと変になってたりと
最終出力してからのチェックが重要になってしまう状態なのです。

これって何か回避方法とかあるのかなー？

まぁ、だいたい変になるパターンが分かっているので
もうそんなに焦りませんが。。。

使いこなせると便利なソフトなんですけどね。
ちゃんと本買って勉強すべきかしら。

CSSのこと

サイトを作成するにあたりコーディングにおいてCSSは必須のものではあるんですが
ある程度の文法にしたがってコーディングしていくのは
当たり前として、1つの表現をするのに様々な方法があるのが悩みなんですよね。

よくあるfloat解除ってヤツです。
float:left; もしくは float:right; させたブロック要素の後には
解除してやらないとその後のレイアウトがぐっちゃぐちゃになります。

この解除の方法は最初に習うのがその次のブロック要素で
clear: both; させてやれば解決なんですけど
その次のブロック要素がいつも同じものとは限らない。

とすると他の方法になるんですけど。

<div stlye="clear: both;"></div>

では空の<div>要素を使ってしまうことになるので
ソース上あまり美しくない。

有名な「clearfix」を使ってみても万能ではなく
一部を <div stlye="clear: both;"></div> 使用しないと 崩れてしまうブラウザもある。

それでは float したブロック要素を囲うブロック要素に

overflow: hidden;

を設定する方法もあるんだが、これも何重にも2階層以上になると
どっかで崩れるんだなー。
一応親にあたるブロック要素で

zoom:1; と overflow:auto;

を設定すると回避できるとかいう記事もあるんだけど
まだ試してないです。。。

コレ！っていうやり方ないんかな～？
結構いい制作のお仕事をされている方のサイトでも
これだけは色々なパターンがあるようで。
皆さん悩まれているんですよね。
それにしてもブラウザが1種類で世界共通になれば良いのに！
と大まじめに思ってしまうこの頃でした（現実逃避やん。。。）。

IE６にはホントに悩まされる

ウェブサイトを制作する際、苦労するのはIE6対策です。
もちろんサイトの構成とか色々苦労するところはあるんですけど
最終的にコイツにかなり悩まされるのですよ。

時代はIE9だというのにね。
それでもIE6のユーザーって意外に多いので無視はできません。

ページが長くなったら「ページの先頭へ」っていう
先頭への戻るリンクを設定するのは当然のことなんですけど、
ただリンクを設定するだけだったら一瞬で戻ってしまいます。

やはりここはJavascriptで「するするっ」となめらかに戻りたいなと。
今ではメジャーな方法なのでちょっと調べれば簡単に設置できちゃんですよね。

後々いろんな仕掛けを入れることも考慮して「jquery」を使うことにしました。
良いですね、画面を少しスクロールしたら右下に
「ページの先頭へ」っていうリンクが出てきて、下まで着いてきてくれるし。

ところがですな。
思いもよらないバグが！

コーディング途中っていつもリンクのURLのところをとりあえず「#」を
入れておく癖があるんですよ。
後で確認しながら設定していくのが良いかなって思って。
それがナゼか、CSSの一番最後に設定した「a:link」や「a:hover」が
「#」のところにすべて反映されてしまうんですよ。
「ページの先頭へ」のリンク設定には「#」が入るのでエラいことに。。。

もちろんそのバグはIE6だけ。
IE7以降やChrome、Firefox、Opera、Safari（iPadでも確認）にいたるまで
すべて思い通りの表示になっているというのに。
こんなん初めてですよ。

なんとリンクの設定を「もの凄く真面目に」することでやっと解決。
どういうことかというと、

link、visited、hover、active　をこの順番で個別で設定すること

なんですよ。

つまり　a:link,a:visited{ } というようにまとめてもダメなんです。
これが分かるまで悩みましたよ。

CSSのコードは多少長くなりましたが、
これでIE6でもバグは出ずに表示されるようになりました。
ただし、「ページの先頭へ」っていうリンクは設定した場所にしか出ませんけど（爆。
ま、もともとフッタの上に設定しようと思ってたのでこれは許容範囲ですよ。
リンクをクリックして「するするっ」とページの先頭には戻ってくれます。

早くIE6が無くなってくれないかなー。
多分Web制作に関わっている方の大半は同じ思いなんでしょうね。

プログラマーでなくてもプログラムをさわる苦労

まぁ、Webデザイナーも一昔前ならプログラムはプログラマーにまかせて、
という時代でございましたが昨今はそうはいきません。

新たにプログラムを作成するならいざ知らず
ちょいとしたメールフォームの修正などは時間と費用の問題で
依頼することなんてできないんですよ。

しかもJavascriptとかふんだんに使ってるし。
そんなのプログラマーにいちいち頼んでたら
予算が全くあわなくなってしまう。

しかも同じ社内にプログラマーが在中していたら
「お願い」しやすいかもしれないが
社内はデザイナーだけしかも少人数となれば
もう自分でやってしまった方が早い、安いとなります。

そんなことを10年近くもやっていると
「ここを触ったら多分こうなるな」という経験からくる感が鋭くなります。
割に当たるんですよ。
多少エラーが出ても「こうすれば動くかな？」でできてしまったり。

幸い初歩のプログラム講座に行ったことが幸いして
他人の作ったプログラムを見て少しだけ構造が分かったり。

で、先日はよくある
ブログの更新情報をホームページに掲載する、ってのをやってました。
良いライブラリがあるんですね。
RSSのアドレスを設定すると更新情報が設定した件数だけ表示されるんです。

で、自分でカスタマイズ。
更新日時も出したいし
表示するブログは複数だからそこに各々タイトルも付けたいし
と、条件が色々あるので四苦八苦しながらやりました。

取得するブログのRSS情報から日付を取得する際の配列名が
通常いろんなサイトに掲載されているものと違ったのが
分かるまでに半日。

設定プログラムと表示するデータ（.html）の文字コードを
両方UTF-8ではなくUTF-8Nにしないと部分文字化け（表示するデータの方だけ）
することが分かるまでに半日。

いやー、些細な事で時間がかかった、かかった（笑。

でも無事できたので満足です。

制作のこと

ハヤシはWeb制作を結構長い間やってます。
その間、会社を転々としてしまったりもしましたが
その分いろんな作り方を見てきたとも言えます。

今回の転職前にプログラムの学校に通ったので
ホンの少しだけPHPもかじってきました。

そしてですな、ここからが本題。
会社のメイン業務のホームページが昔いたスタッフが作った
PHPプログラムで組まれていたのです。
会社関係者によるブログの更新情報もRSS取得して掲載しており
そのブログも放置されているものを閲覧制限かけたりとか
色々やっていたんですね。

それでメインホームページを見てみると
PHPエラーコードが！！！

よく見るとRSSが取得できなくて、表示（体裁）のプログラムが
正常に動作していませんよ、という内容。

こんなところに掲載するようにされてたっけ？
と思い、このRSSを取得するファイルを探し出し
該当部分を削除してアップロード。

無事エラーコードが消えました。

一応ねSmartyとかもちょっぴり勉強したんですよ。
それだったらどのファイルを更新すればいいかとか分かるんですけど
独自に組まれたヤツってマニュアルもないし
そのままかい！ と軽く画面に突っ込んで終わりにしました。

社長に報告すると「この際大規模リニューアルしよう」という
ありがたいお言葉が。
更新しやすくてシンプルな構造のサイトにしてやるぞ！
と心に誓ったのでありました。