サワグチ クリエイト のすべての投稿

ゆるりら、十和田こども検定 様のホームページが公開されました。

「ゆるりら、十和田こども検定」(主催:ゆるりら、十和田こども検定実行委員会、事務局:十和田商工会議所)様ホームページが公開されました。

 

kodomo01

URL:http://www.towada.or.jp/kodomokentei/

5年前に、「ゆるりら、十和田検定」のホームページをお手伝いしたこともあり、今回、小学生向けのこども検定「ゆるりら、十和田こども検定」のホームページもお手伝いさせていただくことになりました。

ご相談いただいた資料(原稿)では、複数ページでサイトを構成するほどでもなく、1ページでサクッと構成して欲しいという要件でしたが、折角なので、1ページ構成でも、しっかり作ろうと企画しました。

まず、基本的なターゲットは、受検対象の小学5・6年生としました。
※実際に、ホームページを見るかどうかは別に、もし見たら、という想定です。

それにより、原稿の文章や文言、言い回しを可能な限り、簡素化して校正しました。また、逆にこのくらいは漢字読もうという意味合いも込めて、重要な見出し文言には、ふりがなをふっています。

また、文言を統一して、混乱しないよう気を使いました。例えば、「検定」と「試験」とか、「受験」と「受検」などです。

そういうわけで、デザイン云々よりも文章校正に気を使いました。

でも、いちおう当事務所は「Web Design Office」とうたっているので、デザインもがんばりました。

1ページ構成の場合、セクションの区分けが解りやすいように、背景色で切り分けるのは、スタンダードですので、ここもこの手法でいきました。コンセプトカラーは、いろいろ試しましたが、明るい、かつ、落ち着いた緑色を選択しました。別案は、オレンジでしたが、十和田市のPRキャラクターがピンク色を使っているので、暖色×暖色はメリハリがないので、却下となりました。

キャラクター画像は、ちゃんと手続きを踏んで、クライアント様経由で、十和田市役所から許可いただいて、使用しています。
※イラスト画像なんで、「.ai」とか「.eps」、最悪「.png」かと思ったら、一部の画像が「jpeg」だったので、ギョッとして、規定範囲内で補正させていただきました。(^^;

今回、新たにチャレンジした要素のひとつは、本格的な日本語Webフォントの利用です。

ちょうど数か月前に、Adobe TypeKit で日本語Webフォントが本格的に使えるようになったので、ちょうど小学生向けのターゲットということも重なって、バッチリ使いました。どうでしょう?誰でも、パソコンでも、スマホでも、丸ゴシックで見られますよね?(^-^b

ただし、やっぱりフォントダウンロードのタイムラグが若干あるので、ページが表示されるちょっと前に、フェードインしてくる効果を仕込みました。ちょっと誤魔化せたかな?

さて、もう一つチャレンジした要素は、本格的なモバイルフレンドリー対応です。これまでの暫定対処じゃないです。(個人的には、viewportなしのmediaクエリのほうがしっくりくるんだけど・・・・)

今年の4月にGoogleが提唱した「モバイルフレンドリー」の指針に沿ってCSS調整を行いました。

iPad向け(width:768px)の表示

kodomo02

 

いろいろ調査して、当事務所のブレークポイントは、960/768/600/480 にしています。

今回、本格的に「モバイルフレンドリー」対応に踏み切った理由ですが、ターゲットを小学生としましたが、実際は、小学生をもつ親御さんが、真のターゲットかなと考えています。

その場合、小学生の親御さんの世代を考えた場合、パソコンで閲覧する割合と同じくらい、もしくはそれ以上の割合で、スマホからの閲覧数があると想定されます。つまり、パソコンを持っていない、または使えないけど、スマホは持っているということですね。

ということを踏まえて、今回本腰を入れてみました。まぁ、既に暫定スマホ対応(viewportなしのmediaクエリ)はやっていたので、コツは掴んできましたが、今回かなり洗練できたかなと思います。

600(Nexus系向け)/414(iPhone6+)/320(iPhone5)

kodomo03

 

ただ、ここまでやってみるとやっぱり、Sassとかやんないとダメかなぁとか、Bootstrap系のフレームワーク入れんのかなぁとか考えちゃうわけですね。

でも、ホントにフレームワーク入れると楽なの?って、まだやってないけど疑問視しています。だって、そのおかげで、みんな同じサイトになってるじゃないですか。なーんかつまらん。

それに、結局細かいところの調整って必要でしょ?チマチマと。。。

あれこれ言う前にやってみろって感じなので、とりあえず、次の機会があれば、Dreamweaver CC 2015に入っているBootstrapを使って制作してみたいと思います。

 

それで、話は戻って、「スマホ対応」というよりも、Googleの「モバイルフレンドリー対応」ですが、Googleのテストでは合格でした。

また、iPad/iPhoneでの表示やシミュレーターでもOKでした。

しかし、Android が問題。

シミュレーター(Genymotion)では、4.3以降は問題なしで、4.2以前だと縦はダメで、横にするとOKだったので、これで行けるかと思ったのです。

がしかし、実はスマホ利用者のほぼ大多数が回転ロックしていることが判明。なので、シミュレーターで横向きOKは、全然OKじゃないということです。

ちなみに、2.3とかは、CSS3が全然ダメですが、それなりにスマホ対応してくれます。ホント、Androidは罪ですよ。とほほ。
※というよりも、日本メーカーのAndroid端末が、画面解像度とdp解像度を無視して作ってたんじゃない?と思うんですがどうでしょう?個人的な感想ですけどね。

ただ、今回は、諸事情により、これ以上の対応はなしとして、スマホで見づらい方には、パソコン閲覧か、PDFによる検定要項をダウンロードしてもらう、という運用対処となりました。

もう少ししたら、足並み揃うかな。。。。

高野事務所 様ホームページを新規立ち上げました。

十和田市にある税理士事務所(社会保険労務士業務、中小企業診断士業務)の「高野事務所」様のホームページを新規立ち上げました。

こちらも、公開は今年の2月でしたので、制作実績の報告が遅くなりました。申し訳ございません。

 

takano01

URL:http://takano-tax.biz/

新たに独立開業されたとのことで、ホームページの立ち上げのご依頼をいただきました。

開業に伴うホームページの新規立ち上げとなるので、目的としては、企業サイト(コーポレートサイト)をベースに、業務紹介がメインになります。

簡潔に、シンプルに、事業コンセプトが明確になるように、情報構成とページ構成を設計しました。

デザインの方向性としては、業務カテゴリーを考えると、出来るだけ清潔感を損なわないようにする必要がありますので、クライアント様と検討した結果、青ベースでの作成となりました。アクセントはオレンジ色としてメリハリを付けました。

また、見出しや重要文字は出来るだけ「游明朝」(他は明朝系のフォント)で、「しっかり」感を求めました。

なお、クライアント様がブログをやっていたということもあって、サイト内にブログを設置(旧ブログの統合&引っ越し)させる構成にしました。つまりは、「CMS使いました」というオチですね。

 

takano02

 

新規立ち上げということもあり、クライアント様のご要望や要件が明確でしたので、情報設計や原稿の準備など、こちらの計画したスケジュールよりも順調に制作が進められました。

また、ちょうど直前にCMSを使ったサイト制作を行ったばかりでしたので、PDCA回す感じで、もろもろ作業効率をアップできたのも要因のひとつでしょう。

ただ、ここ何件かの案件を経て、本当に感じることは、どの案件も同じ作業工程がないということです。

作業効率をアップさせるためには、同じ作業工程を繰り返して精度を上げていくのがベストなのでしょうが、ことWeb技術の日進月歩には適用できません。

いや、分進時歩(?)なみの技術進歩のため、制作過程がどんどん変わっていきます。もちろん、昔ながらの方法を貫き通すことも方法のひとつではありますが。。。

Adobe をはじめとするソフトや物凄いテキストエディタ、Androidシミュレーターなど、様々なツールの革新や、いろんな人の作業工程の改善アイディアなどを目の当たりにしたら、どんなに新しいモノだろうと使わない手はないわけですね。

新しい手法を採用しないで制作作業する方が、よっぽど効率悪いし、出戻りが大きいだろうなと、容易に想像できるわけです。

そういうわけで、当事務所のやり方は、これまでの経験やスキルをベースにし、でもそこに固執ぜず、常に新しい考え方や未来予想図を見据えて、やみくもに手を付けるのではなく、冷静に効率的に吸収して成長していく。というスタンスで行きたいと思います。

 

とは、いうもののこちらのサイトも、実は暫定スマホ対応で、viewpotなしで、CSSでのmediaクエリのみとなっています。

vewportを使った本格「モバイルフレンドリー」対応は、様子見です。
業務内容やターゲット的にみても、必要性が低いからです。

豊川建築工房 様のサイトをリニューアル公開しました。

十和田市にある注文住宅専門の建築工房、「豊川建築工房」様のホームページをリニューアル公開いたしました。

toyokawa01

URL:http://toyokawa-kk.com/

 

遅くなってすみません。公開自体は、2014年12月と去年の暮れです。こちらでの発表が遅くなっただけです。(^_^;)

旧サイトは、ウッドテイストを全面に押し出したデザインで、工房の特長を表現していたのですが、近年の施主様の方向性としては、「モダン」や「スタイリッシュ」というキーワードのデザイン/スタイルが求められているとのことで、思い切ってホームページのデザインも一新することになりました。

また、ホームページ本体と、無料ブログを使用していたため、ブログの更新によるサイト運営評価が、ホームページ本体に反映されていないという課題もあり、本体とブログをひとつのサイトにまとめて、サイト全体の効果をアップさせることが、いちばんの目的となりました。

 

toyokawa02

 

そういうわけで、やっぱり「CMS」導入となりました。これまで、比較的「CMS」導入には、様々な観点からお客様にはおすすめしていなかったのですが、今回のケースのように、情報発信を定期的に行っていたり、実績をたくさん掲載する必要がある場合は、これはもう間違いなく「CMS」導入です。

どのCMSを使ったか?については、まぁ、お分かりかと思いますが(汗

さて、今回のリニューアルしたサイトの制作過程でのポイントを解説してまいります。

 

toyokawa03

 

まず、全体のデザインですが、いろいろとヒアリングや検討を重ねて、ナチュラルな緑色をメインカラーにしました。ただ、どちらかというと青よりな微妙な緑にしてあります。トーンは落ち着いた感じ。

でも、やっぱりウッドテイストが工房の特色ということで、木目を入れたいというご要望から、木材っぽい色をサブカラーにしてあります。でも、これ、よくみると実は、ドアや床材を写真で撮って、これをPhotoshopで加工して、バランスとった素材です。よーーーーく見ると、木目がうっすら見えます。そういうちょっとしたニュアンスが全体の雰囲気を柔らかくしているんです。(と思います。^^;)

基本のフォントは、スタイリッシュな方向にするために、出来るだけ細字のものを使いたかったので、「游ゴシック」にしました。ロゴ文字などに使用しています。たぶん、Macでも行けるはず。。。かも?(汗

見出しで使う欧文フォントは、Google Webフォントの「Raleway」を使いました。日付などの数字は、ね、あれです。(^^;

 

toyokawa04

 

住宅屋さんということもあり、出来るだけ写真画像を大きく配置するようにしました。特に施工実績やモデルハウスは。

また、施工実績では、タグ機能を「特長キーワード」として、どんな方向性や特長で施工したのか?が分るように。さらに、参考にしたい施主様が、参考にしたい判断材料としてのキーワードがすぐにわかる、選べるようにしました。

これは、一例ですが、CMSの機能をサイトの機能や用途にふんだんに活用してみました。

 

toyokawa05

 

また、お問合せフォームも設置。

それから、暫定でなんちゃってスマホ対策してあります。残念ながら、なんちゃってなので、iPhoneなどAppleの端末か、Android 端末の最新機種(たぶん、4.3以降)じゃないとレスポンシブになりません。

今回、クライアント様のご了解をいただき、正式に「モバイルフレンドリー」対応に着手する運びとなりましたので、もうしばらくお待ちくださいませ。

Photoshop CC 2015 でカンバスカラーが透明にならない!?

いよいよ、Adobe Creative Cloud が2015にバージョンアップです!!

「すべてをアップグレード」ってやってしまうと、CC2014が削除されちゃう~!!とかいろいろ注意点があるようなので、慎重にアップグレードしましょう。

私の場合、あまりバージョンアップに対する懸念が少ない分野ですので、えい!や!っとCC2015にやってしまいました。保険でノートのほうはCC2014のままで。。。。(ま、時間の問題)

さて、で、Photoshopで早速、作業しているわけですが、ま、左程影響はありません。Photoshop自体、バージョンまたいでもそこそこ作業出来るという性質だからかもしれません。

ただし、新規作成したときに、カンバスが透明じゃない(透明を選択できない)のが、一番の衝撃でした。なんじゃこりゃ。

ps-img01

もちろん、Web素材を(ちょっとしたバナーとかを)作るので、「ドキュメントの種類」を「Web」にしたわけで。。。。「カンバス」を「透明」にするとか選択する項目がないわけで。。。。。おかしいなぁと思いつつ強行すると、こうなる。

ps-img02

レイヤーが白いんです。いろいろ試しましたが、これは白ではなく、いちおう透明らしい。。。
しかも、「アートボード」とか、なんすか?イラレっすか?トンボ要りますか?塗り足しますか?みたいな。

要するに「ドキュメントの種類」で「Web」を選択した場合、『Web用の素材』を作るのではなく、『Webページのカンプ』を作成する方向が基本となる、と思われます。

この先お世話になると思いますが、今のところはとりあえず、バナーパーツだけ作りたいわけで(苦笑

なので、こうあって欲しいわけです。

ps-img03

カンバスが透明だよ~。と解りやすくね。

ドロップシャドウが見えづらかったら、こっちで白レイヤーを入れて表示確認するから、基本カンバスは透明でお願いします!

で、どうするか。

つまり、「アートボード」っつー扱いを今のところオフりたいわけですね。いろいろやってみて、見つけました~。

ps-img04

レイヤーパネルで、「アートボード」っというレイヤー(?)を右クリックすると「アートボードをグループ解除」という項目があるので、これを選択します。

そうすると。。。

ps-img05

はい!なりました~。これっすね~。これで、無事バナーパーツが作れます~。^_^b

と、長々と説明しましたが、、、、、

が、しかし、こういう面倒くさい遠回りはしないようにしましょう。

新規作成する場合に「ドキュメントの種類」を「Web」、「モバイルアプリデザイン」、「アートボード」を選択すると、こういう状況になります。
それ以外だと、これまでの新規作成画面で「カンバスカラー」を選べます。

ps-img06

ただ、今回の件で思ったのですが、カンバスが透明かどうかって、要は慣れかなぁと思ってきました。(たった今だけど。。。。汗)

だって、Photoshopのレイヤーは基本的に透明って決まっているわけで、意図して塗らない限りは、永久に透明。

しかも、レイヤーパネルでパーツ化したいレイヤーを右クリックして「PNGクイック書き出し」出来るし。

ps-img07

そういうわけで、ちょっとバタバタしたけど、思ったほど問題なかったかな~。という感じです。

それよりもドキュメントの種類「Web」にすることで、出てきちゃう「アートボード」の効能のほうが、このご時世、メリット高そうだなぁと。。。。

そっちのほう、上手く使えるように研究していきたいなぁと思います。

 

Photoshpのバウンディングボックスについて。

久々の記事w

Photoshpでバウンディングボックスを表示させるショートカットキーは「Ctrl+T」です。Macは「Cmmand+T」ですね。(以後、Macの方はCtrl→Cmmandで読み替えてください。)

ps-boundingbox

Illutstratorではバウンディングボックス(以下、バボ)をしょっちゅー使うので、バボの表示/非表示は、ショートカットキーが「Ctrl+Shift+B」って覚えていたのですが、Photoshopのショートカットキーは怠けて覚えていませんでした。

で、ちょっと気が向いたので(汗)調べました。

Photoshopの場合、「移動ツール」に持ち帰るとツールオプションバーに「バウンディングボックスを表示」のチェックが出てきます。

まぁ、これをチェックしたり外したりすればいいんですが、Photoshopの場合、基本的にバボは表示させません(私個人の作業の傾向では、という意味で)。

バボが必要なケースは、拡大、縮小、回転、、、、と、いわゆる変形する場合です。

なので、その時に、ツール持ち替えて、チェック入れて、作業して・・・とやっていたのですが、やっぱりちょっと効率悪い。やっぱりショートカットキーがいいな。というわけです。

それで、ショートカットキーを調べたら、「Ctrl+T」なわけです。

ただし、Illustratorとちょっと操作のニュアンスが違います。

Illustratorの場合は、ベクトル画像という性質上、バボを出したり、出さなかったりをいつでもやってよいので、「Ctrl+Shift+B」でバボ出して、もう一回「Ctrl+Shift+B」で非表示になります。

Photoshopの場合は、バボを出す→「変形する(編集→変形コマンドと同じ)」という操作になりますから、「Ctrl+T」で「変形」の編集モードに入ります。つまり、その後でいくら「Ctrl+T」しても「変形」の編集モードからは抜けません。戻の世界に戻って来られないのです。

「変形」の編集モードになると、ツールオプションバーの右端に「× ○」が表示されて、「キャンセル」or「確定」しないと元の世界には戻れないんですね。Photoshopの性質上、いったんビットマップ(として見せるため)に絵をレイヤーに落とさないといけないわけで。。。。

そんなこんなで、上記をまとめて、Photoshopのバボ操作のお勧めな流れは、以下の通り。

  1. 基本として、「移動ツール」時のツールオプションバーの「バウンディングボックスを表示」のチェックは外す。
  2. バボが欲しいな(→変形したいな)という時は、「Ctrl+T」。
  3. 変形して確定したい場合は「Enter(○)」。やっぱやめた!って時は「Esc(×)」。

で、作業の続き。。。となります。

どうでしょう?

そういわけで、Photoshopのバボのショートカットキーは、変形(Transform)モードに入るよ!という意味で、「Ctrl+T」なんだと思います。たぶん。。。(汗

2015年賀状お披露目

年賀状

あけましておめでとうございます。本年もよろしくお願い申し上げます。

今年も年賀状公開いたします。毎年恒例ではありませんが、わりといいものが作れたので公開いたします(^^;

年末忙しくて今年は既製品でごまかそうかな?とあきらめておりましたが、思ったよりサクッと作れました次第です。

Illustratorさまさまでございます。暮れのIllustratorのセミナーでいい!と思った「文字タッチツール」をさっそく使いました。回し過ぎだろう~。というくらい回しておきましたw

改めて思いましたが、文字組みって難しいですね。絵のほうは小一時間でちゃちゃっと作ったのですが、文字組みは3時間くらいかかりました。結局は納得ゆかずに、翌日微調整して、もう限界という感じです。まだ、納得いってないですね。難しい~。。。

ということで、本年もいろいろな課題に取り組んでまいる所存です。

年末年始の営業について

年末年始の営業についてお知らせいたします。

2014年12月29日(月)~2015年1月3日(土)まで、年末年始の休業となります。

お電話でのお問合せには対応できない場合がございますので、お急ぎのご連絡はメールにてお願い申し上げます。

なお、メールでのお問合せには随時対応させていただきます。

今年もみなさまに大変お世話になりました。誠にありがとうございました。来年もみなさまのお力になれるよう、いっそう励んでまいります。今後ともよろしくお願い申し上げます。

『10倍ラクするIllustrator仕事術』全都道府県縦断セミナーツアー(青森編) に参加してきました。

久々の更新です。もう少し定期的にアップしたいな。。。。

さて、さっそく本題。12月15日(月)に、セミナー参加のため、青森市に行ってまいりました。ちょっと雪が心配でしたが、ギリギリ天候に恵まれたかな?

今回のセミナーの概要は、こちら▼

http://wdha.jp/2014/11/wdha039.html

『10倍ラクするIllustrator仕事術』の改訂版ということで、実は何年か前から既に存在したバイブルなわけですが、私のイラレのスキルがイマイチということもあり、なかなか手を出せずにいました。

でも、去年あたりAdobe CCにしてから、イラレを使いまくるようになり、さらに、パソコンスクールでイラレを教える機会も増えてきたりして。。。

そんなこんなのうちに、「あー、なんかいろいろ見えてきたかも~♪」っていう手ごたえを感じるようになり、ようやくこのバイブル「10倍ラクするIllustrator仕事術」を購入しました。

10倍ラクするIllustrator仕事術個人的には、やっぱり、そこそこのイラレの下地といいますが、経験があったほうがより楽しめる内容かなと思いますね。最初に手に取る本ではないでしょう。

そういうわけで、今回のセミナー、大変楽しく勉強してまいりました。

内容は、とにもかくにも盛りだくさんで濃い~ものばかりで、メモ振り返るのがやっとなのですが、わたくし的に、今回一番ツボきたもののうちふたつピックアップしておきまーす。

ツボにきた、ひとつめ~。配置。

内側配置でマスクの手順省略~。

20141216-01それから、複数まとめて配置選択。この発想はなかったですね~。1枚1枚頑張ってたので、便利。

 

ツボにきた、ふたつめ~。文字タッチツール。

20141216-02もう、これは使うしかないでしょう。今まで知らないふりしてたのがウソみたいですよ。ホント。

 

あと、細かいところでツボにきたのは、操作途中で止めたいときは「Esc」ですね。例えば、配置の途中で写真間違えたわ!って時は、とりあえず配置しちゃって削除してやり直し、、、、ではなくて、「Esc」でキャンセルしてやり直し。なので、ちょっと手間が省けるかなと。

 

他にも盛りだくさんなんですが、整理つけて実際に使っていきたいと思います。

いやもう、もっすごい勉強になりました。ありがとうございました。往復6時間運転した甲斐がありました。^-^b

 

っつーか、このサイト、オリジナルテーマに替えないと。。。正月休みにやる。。。。かな(汗

民宿・食事処 根岸家のサイトを公開しました。

十和田湖と奥入瀬渓流の繋がるところに1件だけ存在する民宿の「民宿・食事処 根岸家 ~十和田・奥入瀬 四彩の宿~」のホームページが公開となりました。

works201407

▼民宿・食事処 根岸家のサイトURLはこちら▼

http://ww35.tiki.ne.jp/~negishiya/

可能な限りコンサルティングして公開可能な状態まで整理してはいますが、諸事情により、いろいろと改善する必要性は、まだまだ残されております。

ただそれは作り手の内部からの視点に過ぎず、実際にはサイトを公開することで、集客効果が良い方向に向かっているようです。