今日はSVGデータを使用してアニメーションさせてみましょう。 SVGデータとは何かといいますと、端的に言うとXML形式で書かれた画像です。 SVGの基本 例えばこのSVGデータをテキストで開くとこんなかんじ。 イメージマップのように頂点の座標が数値で記述されています。 テキストで描画情報を持った画像ってところでしょうか。ベクトルデータなので拡大縮小してもボケることはありません。 pointsの部分、頂点の座標をちょっと増やしてやると、簡単に移動させることができます。 ↓ この […]
毎度おなじみ怖くないシリーズです。そろそろ年の瀬ですし、カウントダウンとか作って遊びたくなりますね。 今日はnew Date()を使用して、日付で遊んでみましょう。 日時取得の基本 new Date()を使用すると、現在の日付時刻を取得することができます。 始めの日時の値は「 Fri Dec 04 2015 11:24:37 GMT+0900 」といった形で取得されます。 そこから「年だけ」「年と月だけ」と必要なデータだけ抜き出していきます。 Step1：まず下準備 まずいつ […]
毎度おなじみ、[怖くないJavaScript + jQuery]シリーズです。 かゆい所に手が届くような、ニッチなjsをどんどん作っていきたいと思います。 「今回はウィンドウサイズに合わせてメイン画像のサイズを変えるjs」を作ります。 ファーストビューは維持したいんだけどメイン画像はウィンドウサイズに合わせて大きく取りたいと要望があった時には最適です。ウィンドウをリサイズした時の処理も入れて行きます。スマホにもちょっとだけ配慮します。 仕組みとしては、全体のウインドウのhei […]
素敵な若いお嬢さんのメガネケースに「うなぎの蒲焼き」シールが貼ってあるとは思いませんでした。 どうしてなんでしょう。とても気になりました。 なんとなく入ったコーヒーショップで何か面白いことがあると少し楽しい気持ちになりますね。 ちなみにこの「うなぎのかば焼き」シール、調べてみると1冊500枚入りで1000円くらいで購入できるようです。 販促シール専門店と言うサイトを見つけたのですが、眺めているとなんだか不思議な気持ちに。自分に全く縁の無いちょっと変わったサイトを眺めていると楽 […]
本日はWordPressの管理画面カスタマイズについて。 一つだけどうしても消せなくて悩んでいたのが、投稿一覧画面にある一括操作の「編集」操作。 この編集操作、適用して使用すると一覧画面でタグやカテゴリ作成者コメント果てはフォーマットまで様々なステータスを編集することができますが、何か一つでも使用して欲しくないものが含まれている時、絶対に触ってほしくありません。もうできれば存在に気付かないで欲しい。 CSSで消せばいいやと思っていたのですが、Safariでoptionタグにd […]
先日、いつ案件が舞い込んでも大丈夫なようにと試しにSassを導入しました。 参考にさせて頂いたのはこちらの記事。Sassについて詳しくは下記記事をご覧ください。 参考URL：これからSassを始めたい人へ！導入手順をまとめてみた(Dreamweaver対応) | 株式会社LIG 何回やってもDreamWeaverで有効にならない そこで導入していてつまずいたので、メモのエントリ。 Sassのデータは「.scss」という拡張子なのですが、.scssはDreamWeaverに対応 […]
最近驚いたこと。 最近驚いたことです。 からあげクンって1986年にできたんですね。なんと今年で29歳。 当社のエンジニアさんに教えてもらってから、心の中でからあげ先輩と呼んでいます。 オフィスの近くにローソンがあり、毎日通っています。ローソンのからあげはとても好きです。 からあげクンだと昔あった桃味とオリーブ味が好きでした。 からあげクンをとりあげた専用のサイトまであるようです。 カラフルでかわいらしい。 「からあげ王国」 そしてなんと1000個に一個くらいの確率で、レアな […]
毎度おなじみ、[怖くないJavaScript + jQuery]シリーズです。 今回は、マウスオーバーで注釈を表示させるjsを作ります。 デモ 実際に動かしてみるとこんな感じになります。 ボタンにマウスを載せてみてください。 デモを別ページで開く ファイル一式ダウンロード Step1：まず下準備 こちらはいつもと同じですね。まず必要なファイルを読み込みます。 headerの中に、jQueryと、自分で作ったjavascriptのファイル（今回は tips.js とします）を読 […]
本日の渋谷は雨。先週の陽気が嘘のように寒いですが皆様いかがお過ごしでしょうか。 最近の私はと言いますと、腰痛に悩まされています。オフィスでの座り仕事、職業柄なんでしょうか。 さて、今日はなんだかイラストが描きたくなったので、この夏起こったことを1コマ日記にしました。 ビットマップでの色塗りの作業も、たまにやると楽しいですね。
バナーやキャンペーンの画像を作る際、ゴテゴテのグラデーションやテクスチャをふんだんに使った文字装飾、大変ですよね。 大体値段やキャンペーンの内容となると分かりやすく金赤やゴールドが使用されるので毎度毎度マンネリになりがちだったりします。 文字装飾のパターン第二弾で集めてみました。 第一段はこちら Fireworksで開いてコピーし、「Shift + Ctrl + Alt + V」の属性をペーストを行うとそのままご自分のデザインに反映できます。
おはようございます。毎日暑いですが皆様いかがお過ごしでしょうか。 さて皆様、「見ないで描こう」という遊び、ご存知でしょうか。（他に正式名称あるんでしょうか。） 例えば、ガチャピン。スマホで検索してはいけません。頭の中にあるぼんやりとしたイメージを頼りに絵を描きます。 うろ覚えで出来上がった絵は何だかおかしくてちょっと楽しい、そんな遊びです。 ブログに何か絵を描きたいなと思って考えていたのですが、そういえばこの学生の頃流行ったなぁとこの遊びを思いだしたので、ちょっとやってみるこ […]
ある正円形の要素にマウスオーバーをすると、角丸四角になるような効果をつけたくて、jQueryの.hover()使用してborder-radiusが変化するアニメーションを設定した所、一旦正方形に戻ったうえで角丸にアニメーションしていくという動きをして調査したので記事に。（正しい動きと言えば正しいのでしょうが…） ▽やりたい動き ▽現実 まずマウスオーバーして実際の動きをご確認ください。 デモを別窓で開く 対策しても、ページ表示後の初回のアニメーションのみ未対策の時と同じ動きを […]
毎度おなじみ、[怖くないJavaScript + jQuery]シリーズです。 今回は、スクロールに合わせてついてくるメニューを作ります。 デモ 実際に動かしてみるとこんな感じになります。 フレーム内を縦にスクロールすると、ナビゲーションが途中から上部に固定になります。 デモを別ページで開く ファイル一式ダウンロード ナビゲーション要素のid、切り替えるスクロール位置の高さがそれぞれ変更できます。 そのままでもお使い頂くこともできますが、下記に動作の解説です。 Step1：ま […]
おはようございます。皆様梅雨のしっとりした季節、如何お過ごしでしょうか。 私は雨女のせいもあり、外出する時には何故か雨がぱらついてしまうので、私生活までしっとりと過ごしております… カラッとした季節が待ち遠しいですね。 横浜市の舞岡公園に行ってきました。ぼくのなつやすみみたいな風景、のどかでオススメスポットです！ — さて、本日の本題ですが、今日はYahoo!JAPANのバナー広告を集めてみました。 老若男女、たくさんの人が閲覧する検索エンジンのトップページに掲載 […]
<!–なぜか無いと動かない–> Webサイトを閲覧している時、右クリックして「ページのソースを表示」とすると、そのサイトのHTMLソースが見ることができます。 全く分からない方の為にものすごくざっくり説明すると、「ここに画像を表示する」「ここにハイパーリンクをはる」などと、Webサイトに必要な機能が全部書かれているんです。 その中で、コメントアウトというメモのような記述があります。 <!– ナビゲーション –& […]
ついに関東も梅雨入りしたようですね。 毎日これから雨かと思うと憂鬱ですが、そんな気持ちがちょっと晴れるといいな、と思います。 本日もTwitterまんがを書きました。休憩の合間の息抜きにどうぞ。 LEGO 本日のツイート 本日書かせて頂いたツイートはこちら。 とってもかわいい。 バックナンバー あわせてこちらもどうぞ。 Part35 「社蓄川柳」 Part34 「流行りの」 Part33 「新米パパ」 Part32 「指きり」 Part31 「スーパーカップ」
皆様ランディングページって言葉ご存知でしょうか。例えば、楽天などで蟹何かを販売する時にずーっと説明が縦に長くてゴテゴテに装飾されたページ見たことがあるかと思います。あれがランディングページです。 キャッチコピー、コンセプト、安全性、効果、お客様の声etc… 普通のWebサイトとは異なり、新商品やおトクなプランなどの商材をより効果的にアピールするためのページですので、普段の作り方とは全く異なったテイストで制作されます。不思議なもので、延々と商品の効果をうたわれると、 […]
猫の写真を眺めるのが好きなんですが、昨日ずっと眺めていたら降ってわいたようにキャラクターのイメージを思いつきまして。イメージを捨てちゃうのももったいないのでデータに起こしてみました。 ふっとい麻呂眉が特徴です。
タスクの合間になんとなくサラッと手が動いて落書きしてしまう。絵を描く習慣のある方には多いんじゃないでしょうか。 私も時々落書きしてしまいます。後から見返してみると何を考えていたのか全く分からないのですが、こういうのを見るのはとても楽しくて好きです。 今日はそれらが溜まってきたので載せてみましょう。 ▲「ツヤツヤ」ってそんなに大きく書かなくても。きっとバナーのデザインを考えていたんだと思います ▲メールのお返事を待っていました ▲空腹過ぎて時空が歪んでいます ▲北海道を表したく […]
最近、パワーポイントで資料を作る際に綺麗にまとめるコツを調べていたのですが、多くのチュートリアルでアイコンやイラストを使って視覚的に訴えかけることが勧められていました。しかし絵心もないし、イラスト素材探し出すのも一苦労…とお悩み方も多いのではないでしょうか。 ならば私が描きましょう！と発起してイラスト素材を作ってみました。 なんとこのイラスト素材、全てパワーポイントの図形を使って作られています。拡大縮小をかけても解像度が足りなくてモジャモジャになったりしません。色も自分好みに […]
少し気が速いかなと思いましたが、GWのおでかけにぴったりなスポットを集めてみました。 長い連休はやっぱり楽しみですね。私は既子供のように張り切っています。オンオフ切り換えて、しっかりやっていきたいですね！ 【原宿】あいぱく アイスクリーム博覧会 2015 場所：ラフォーレ原宿 期間：2015/5/2 ～ 2015/5/6 11:00～20:00 URL: http://www.i-89.jp/ 【幕張】プラレール博 in TOKYO ～みんなのまちへプラレールが大集合！！～ […]
毎度おなじみ、[怖くないJavaScript + jQuery]シリーズです。 今回は画面サイドにくっついてくる、折りたためるサイドメニューを作りました。 デモ 実際に動かしてみるとこんな感じになります。 デモを別ページで開く ファイル一式ダウンロード 各要素のid、メニューの横幅、ボタンの中身、アニメーションの速さがそれぞれ変更できます。 そのままでもお使い頂くこともできますが、下記に動作の解説です。 Step1：まず下準備 こちらはいつもと同じですね。まず必要なファイルを […]
仕事柄、WEBに関することをプライベートでも聞かれることが多いです。 一番多いのが「WEBサイトってどうやって作るの！？」というものなのですが、説明する際にHTMLソースを見せて「ここに画像を表示して、ここに文章を書いて、って表示の指示を延々と書いていくの」と伝えると、大抵の方が「そっか…」と少し悲しそうな顔をします。 英数記号の羅列を見ると拒否反応を示してしまう方が多く、そこで話が終わってしまいます。 実際にHTMLタグを学ぼうとして他のサイトを見てみるも、何だか難しそうだ […]
御存知でしょうか。今2016年度の年賀状デザインコンペ真っ盛りの時期だと言うこと。 とても気の早い話に思えますが毎年この時期です。早い所は皆が年始の休みが明けた頃に締切で、もう応募が終了していたりします。 aiデータを渡すので、デザイナーとしては割に合わない作業になりがちなんですが、ちょっとお小遣い稼ぎしたい時なんかにはぜひどうぞ。大体入賞すればそのまま商品化されます。 ◆2016年版 東急ハンズオリジナル年賀状デザインコンペ 締切：2015年05月18日 (月) 賞：大賞（ […]
こちら、日本の都道府県の標章です。先日まとめとして拝見したものなのですが、それぞれの意味を調べてみたらなかなか良い者になったので、記事にしてみました。 北海道 北海道開拓使が使用していた旗のデザインを元に、現代的にしたもの。先人の開拓者精神と雄々しく伸びる北海道の未来を表している。 —– 青森県 青森の地形を図案化したもの。カラーは深緑が指定してあり、余白の白地と合わせて意味が設定されている。白地は無限に広がる宇宙世界を表し、緑は躍進発展してやまない希 […]
運営会社:株式会社8bit
制作サービス
運営サービス
