フレークの素 | Web制作・システム開発のCreativeFlakeブログ

こんにちは、クリエイティブフレークです。 子どもの悩み、親の悩み、教師の悩み…… 複雑化する現代の教育現場では、各々の悩みを相談できる場も必要になってきた時代なのかな、と感じます。 少なくとも自分たちが子どもの頃当たり前だったことが、もはや当たり前ではなかったりして、 柔軟に時代に対応していくのも一つ、必要な要素ではないかと思います。 教育って、その人間の一生を左右するかもしれない、とってもセンシティブな分野だと思うんです。 もしそこに問題が発生すれば、自分で解決するのは負担であり、不安でもあり。 そんなとき、安心して専門家にお任せできる、 「埼玉教育サポートセンター」様 のサイトのデザインを担当させていただきました。 対応可能な内容としては ◎人材育成等に関する講演、職場研修、広報戦略 ◎心身の不調などにより、服務・人事上のお悩みを抱えている先生からの相談 ◎退学や転学の悩みを抱えている生徒、保護者の相談 ◎教育委員会や学校との橋渡し、連絡調整 ◎文化施設、文化団体等の経営、事業展開への提案 ◎入社試験、公務員採用試験、各種昇任試験に係る論文やプレゼンテーションの助言 などです。 相談・カウンセリングを選ぶ際のポイントとしても重要な、話しやすさ、対応のよさも◎です。 くわしくは こちら（http://kyouiku-support.com/） から もちろんWebの世界でも同じく、柔軟さって大事で、需要に応じて変化できるとこが必要。 巷で流行っていること、今話題のもの、今年流行のカラーは、若い方々から勉強しています！ そして…… 今回はWordPressのデザインでしたが、こんなサイト作りたいんだけど！という方もぜひお問い合わせください。 CreativeFlake お問い合わせ Written by Creative Flake

こんにちは、クリエイティブフレークです。 Windows XPのサポートが終了してから、国内のIE10のシェア率が急激に高まり、Chromeも急伸しています。 これまでどうしてもIEの古いバージョンのユーザーのことを考慮すると、完全CSS3はまだ先かなと思うところでしたが、そろそろ勉強し始めどきかもしれません。 今回はCSS3だけで動くアニメーションの簡単なサンプルを。 【デモ : DEMO】 CSS3だけでアニメーション そもそも、アニメーションといえば、 ・gif（Photoshopなどでタイムラインでコマ送り。あくまで画像なのでパラパラ漫画と同じ理論。） ・Flash（タイムラインもしくはプログラミングで制御。見るにはFlash Playerのインストールが必要。） ・jQuery（JavaScript言語を使用して動的に制御。） 時代ごとに移り変わってきましたね。 では、こんなにアニメーションは存在するのに、なんでCSS3を使いたがるの？ ・gifの欠点 gifアニメーションの欠点は細かく動かすとファイル容量が大きくなります。 また、滑らかな動きには向いていません。 ・Flashの欠点 FlashはFlash Playerが必要なので、インストールしていないPCや、スマートフォンには対応していません。 ・jQueryの欠点 jQueryはプログラミング可能なので、細かく動作を指示できますが、jQueryを使用する場合、JavaScript単体とjQuery本体の組み合わせで、ファイルは大きくなります。 ここで登場するのがCSS3。以前ならマークアップ言語で動作の指示ができるなんて思ってもみませんでした。 今回の目標 ・CSSで丸や四角などの図形を描く ・CSSで回転させる ・CSSでフェードさせる 【デモ : DEMO】 CSS3だけでアニメーション ▲こんなかんじ 今回のデモのソースコードはすべてHTML内に記述してあります。 ソースコードが長いので、ここでは解説だけを記載します。 サンプルソースコードの解説 div { position: absolute !important; top: calc(50% - 100px); left...

こんにちは、クリエイティブフレークです。 Web系、クリエイティブ系と一言で言ったって、実は細分化されていて、それぞれの特徴も全然違います。 これからWebの仕事を目指している方も、職種選びのご参考にどうぞ。 入社してから「こんなの作りたいワケじゃなかったのに（泣）」なんてなりかねませんからね。 ●ドラえもん＆のび太系（Webシステム・プログラミング） 4次元ポケットから便利な道具が出てくるように、Webシステム開発の人も次々と便利なものを開発します。 一見訳の分からないプログラミング言語を（しかも複数）自由自在に操り、「こんなのなんで出来るの!?」っていう機能を開発してしまいます。 ドラえもん＆のび太でセットのように、開発者＆デザイナーのコンビ等、１人だと急激にパワーがなくなってしまいます。 ひとつの開発期間は1ヶ月〜長いものでは1年単位まで、長いスパンで制作を行います。長い分達成感も。 ●ジャイアン系（ECサイト・ランディングページ） 剛田商店です。 ショッピングサイトやECモール等の物品を販売する業務に関わるお仕事です。 それに関連して、集客のためのランディングページづくりをする場合もあります。 お買い物サイトはカッコイイ・キレイよりも、ワイワイガヤガヤの方が売れる、なんて言われています。 購入率を高めるデザインを考慮したり、イベントを行ったり等、サイトを本物のお店のように、魅力あるお店にできるかです。 制作期間というよりも、運営を一緒に行うなら長いスパンですね。 ●スネオ系（キャンペーン・プロモーションサイト） カッコイイー!!って言われるサイト。 企業のキャンペーンサイトや映画のプロモーションサイトなど、綺麗な写真に、FlashやHTML5、jQueryなどを駆使して最新技術盛りだくさんのサイト。 サーバーに負荷がかかって読み込みが遅くたって気にしない！ 広告戦略も行って、キャンペーン期間という限られた時間内に多くのお客を呼びこみます。 年中次々とキャンペーンをこなす必要があるため、ひとつの制作期間は激短。 ●しずかちゃん系（スマートフォンアプリ） みんなの味方の、アプリ制作。 スマートフォンやタブレットなど様々な端末に合わせられる柔軟性が必要。 お役立ち系アプリからゲームまで、さま...

こんにちは、クリエイティブフレークです。 きょうはHTML5から新しく追加されたタグ、 <header></header> <nav></nav> <article></article> <section></section> <footer></footer> これをIE6やIE7といった古いバージョンのブラウザに対応することが正しいのかということを、考えてみたいと思います。 そもそもHTML5から新しく追加された、上記のようなタグを使うメリットについて考えてみると、 ・ソースコード内が簡潔になる ・classやidを付けなくとも、誰が見てもどの部分なのかが分かりやすい ・複数人でサイトを管理する場合、ルール決めが明確 ・検索ロボットにも分かりやすい（？）←憶測 そういったところでしょうか。 これまでは困ったときの<div>のように、『divタグを連発してどこが対になってるの!?』ってことも少なくなるのでしょう。 逆に、新しいタグを使うデメリットとして、今回の検討項目のような、古いブラウザに対応できない。 対応させる方法はあるけれども、JavaScriptを読み込ませる必要があります。 もちろん、そういった古いブラウザも少なくなってきているのが事実ですし、JSを読み込ませちゃえば一件落着なのですが、これって矛盾では？と感じます。 せっかくタグをすっきり、ソースコードも短くなった訳なのに、これまでより重いファイルサイズのJSを読ませて、PCに負荷をプラスするなんて…… やっぱり制作者だからそういった新しいタグを取り入れたい気持ちはよく理解できるし、新しい技術を取り入れることは良いことだと思います。 でも、それって制作者のエゴであり、お客さんやユーザーからすると、どっちでもいいことなんです!! それならば、ユーザーがまだ古いブラウザを使用してるサイトの場合、もうちょっと様子を見てもいいのではないでしょうか？ 私自身はスマートフォン専用サイト以外は、これまでのタグで丁寧に記述していくことの方が、今の時代に合った、エコなソースコードだと考えています。 【参考までに...