「一日一回脳トレっ」をコンセプトにしたゲーム「100マス計算」を、無料FLASHゲームサイト 「GAME職人工房」 、無料FLASHパズルサイト 「PUZZLE職人工房」 にリリースしました(2009.05.14)。

一般的に100マス計算は一桁の数字を扱いますが、GAME職人工房の100マス計算では１～３桁まで。大人でも十分に手ごわい計算ゲームとしています。百マス全てを正解すると、掛かった時間が表示されますので、毎日継続的に行えば計算力の向上をタイムの短縮で実感できます。携帯でも気軽にチャレンジっ。脳力トレーニング・お子様の計算力向上にお役立てください。

タグ : 100マス計算, Flash, ゲーム, ちょいゲー, 携帯, 脳トレ, 脳力トレーニング

デザインサンプル 「SlideMenu」 で採用されているスライドして表示されるメニューを、サブメニューに採用したサンプルです。サブメニューの表示という点ではデザインサンプル 「P-Menu」 と同様ですが、スライド表示するメニューの動きがサイトの高級感を演出してくれます。またサブメニューはメインメニューをマウスオーバーさせることにより表示されるものが一般的ですが、ここではメインメニューをクリックすることで表示・非表示を制御。マウス操作に慣れていないユーザーにとって、項目数が多いサブメニューから目的の項目を選ぶのは難しい場合がありますが、クリック方式の採用によりストレスを感じさせること無くサイトを閲覧してもらうことができます。　　

(さらに…)

メイン画像上に配置したボタンをクリックすると、メインメニューがスライドして表示されるデザインサンプルです。メイン画像をしっかり提示することができることに加え、スライド表示するメニューの動きにより、サイトの高級感をかもしだすことができます。サイトのナビゲーション的には、メニューを表示させるために１クリック必要となるため効率的とは言えませんが、魅力的な画像の上に敢えてメニューをスライド表示させるなど、演出手法としてはおもしろいものができます。また、デフォルトでは画面を開いた時に、メニューは閉じた状態になっていますが、開いた状態にカスタマイズすることも可能です。　　

(さらに…)

画面上にタブ形状のサブメニューを配置したデザインサンプルです。Yahoo!などのポータルサイトで多く採用されているもので、多くの方に受け入れられやすいデザインと思われます。ページを切り替えることが無いため、表示の切り替えがスムーズである点も利点です。ポータルサイトで採用されていることから分かる通り、トップページ上で多岐に渡る情報を掲載したい場合に適しています。各ページの概要をトップページ上のタブの切り替えで提示、詳細はページへのリンクにより誘導するというサイト構築もできます。　　

(さらに…)

メニュー上でマウスオーバーすると、フォーカスが移動する動きを見せるサンプルです。日常生活のどこかで見たことがある様な、親しみのあるフォーカスの動きが目を引きます。動きの特徴から、デザイン的には本サンプルの様に清涼感を持たせたいホームページに用いられることが多いですが、違った方向性を持つ演出も可能です。また、フォーカスの動きを引き立たせるために、メニューの領域を広く取ったホームページデザインがおすすめです。　　

(さらに…)

安定感のある企業向けデザインサンプル「Sky」のメイン画像を傾かせてインパクトを与えたサンプルです。かっちりとしたホームページ構成の中にポップな印象を与えることができます。また、ヘッダ部分にはみ出した画像部分も表現して遊び心を演出。さらに、メイン画像の傾きにより生じた余白部分には、ページ毎に異なる色を配置させることが可能です。ページの内容にマッチしたカラーを配置することで、さりげないアピールをすることができます。構成的に向き・不向きがありますが、本仕様は他のデザインサンプルでも適用が可能です。　　

(さらに…)

FLASHでは、サイト内で更新する頻度が高い項目（What’sNewなど）を外部テキストファイルを読み込む仕様にすることが多いです。これにより、更新時にはそのファイルを変更するだけで、誰でも簡単に情報を更新できるからです。本サンプルでは、単に読み込んだテキストデータを表示するだけでなく、動きを出すことでサイトに高級感を出しています。また、限られたスペースでも全てのテキストデータを閲覧できる様にボタンを配置。データ数に応じてスクロールし、最後のデータを表示した後は初期状態に戻る仕様にしています。

(さらに…)

マウスの動きに合わせて画像が移動するサンプルです。FLASHでは良く見られる仕様ですが、本サンプルではクリックするとクリックポイントに焦点を合わせてズームアップ、ズームアウトする仕様を加えています。この仕様を応用すれば、例えばアピールしたい製品の写真を、閲覧者が能動的に動かして注目したい部分をズームで見る、ということも可能。ズームイン・ズームアウト前後での画像の動きもスムーズでストレスを感じさせません。

(さらに…)

メニューをクリックすると、サンプル「TabWipe」と同様に画像がスライドして切り替わるサンプルです。「TabWipe」と大きく異なる点は、クリックされた画像を表示させるために、他の画像が一緒にスライドする仕様。この連動した動きはより大胆な画面展開を演出します。

(さらに…)

タブ形状のメニューをクリックすると、タブの動きに連動して画像が切り替わるサンプルです。サンプルでは切り替わった画像からマウスアウトorクリックすると画像が元に戻る仕様にしています。マウスクリックのみにより戻る仕様にすると多少まどろっこしくなりますが、混乱を招くことが少なくなり、PCに不慣れな閲覧者が主なターゲットのサイトに適します。

(さらに…)