投稿者: 森島

マークアップ

【怖くないJavaScript + jQuery】「全てチェックする」を作る

今日はjQueryで、tableのチェック項目などでよくある「全てチェックする」のチェックボックスを作りたいと思います。要素の指定さえ合わせれば簡単に作れます。 合言葉は「jQuery こわくない」です。 デモのファイルはこちらからダウンロードできます。 デモ 実際に動かしてみるとこんな感じになります。 別ウィンドウで開く Step1:まず下準備 こちらはいつもと同じですね。まず必要なファイルを読み込みます。 headerの中に、jQueryと、自分で作ったjavascrip […]

Webデザイン

【キャラクターデザイン】ハロウィンおばけ

おはようございます。最近随分と秋めいてきましたね。過ごしやすい気温なのでとても快適です。 そんな中、スーパーやコンビニを見ているとハロウィンパッケージの商品がちらほらと出てきました。お月見が終わると行事ごとが一旦落ち着くので、ハロウィンは10月末にも関わらず随分早いです。 私もせっかくなので便乗しようと思い、キャラクターを作りました。 ゆるいキャラクターを作るのがとても楽しいですね。 先日秩父市キャラクター公募にも募集してみました。結果は10月だそうで、今とても楽しみにしてい […]

Webデザイン

Twitterまんが Part32

おはようございます。新しいiPhone、発表されましたね。今朝はずっとその話題で持ちきりです。私としましては、iPhone6 PLUSの大きさを見て、画面の解像度が変わってしまうのかしらと心配しています。片手で持ち切れなさそうだし大変だなぁ。 さて、今日もまんがを書かせて頂きました。 忙しいお仕事の合間に、ふふっと思って頂ければ幸いです。 指きり 本日書かせて頂いたツイート ちょっぴりクスっとしてしまいました。 バックナンバー あわせてこちらもどうぞ。 Part31 「スーパ […]

Webデザイン

【バナー】「オーネット」婚活バナー

先日お仕事で婚活サービスを調べることがあり、ブログやニュースを見るたびに「婚活」のバナーが表示されていてじわじわと精神が削られています。 その中でもひときわ目立つ大手婚活サイト「O-net」さんのバナー。他社と比べてデザインパターンが圧倒的に多く、知名度も高いのですが、皆様ご存知でしょうか。 少々内容が突っ込みどころ満載なこともあり、話題に上がったりしますね。お年頃の方はよく見かけるものではないでしょうか。 今回はそんな婚活のバナーを集めてみました。 感情に直接働きかけるよう […]

Webデザイン

実績を作るも良し、賞品を狙うも良し、公募まとめ

おはようございます。今週はお天気次第で気温の変化が激しいですね。 晩夏の折り、皆様いかがお過ごしでしょうか。 今日は公募をまとめみました。 デザイナーたるもの一度はこういったものに応募して表彰されてみたいですね。 自分の実績にもなりますし、賞品を狙ってお小遣い稼ぎにも良し。手軽に応募できるものもあったりするので、ぜひ皆様も一度検討されて下さい。 クリエイターさんでなくても。手軽に公募 奈良アニメメディア祭 愛称募集 ◆賞品: [最優秀賞]1名 キャラクターポスター・ポストカー […]

Webデザイン

Twitterまんが Part31

毎日まだまだ暑いですね。私はというもの、先日「アートアクアリウム」へ行って参りました。昨年ぐらいから話題になり始めた、いわゆる「金魚リウム」ですね。金魚とアートの織りなす不思議な世界、1時間待ちで入場しましたがとても美しかったです。 COREDO室町にも初めて行ったのですが、周辺アンテナショップやだし場もあってとってもオススメです。 さて、今日もまったりとまんがを書かせて頂きました。癒しの時間をお届けできれば幸いです。 スーパーカップ 本日書かせて頂いたツイート 暑いとなんだ […]

Webデザイン

宇宙を感動するミュージアム、『TenQ』に行ってきました

『TenQ』とは、先月、7月8日に東京ドームシティにオープンした、宇宙についての知識を深めることができる9つのエリアによって構成された、エンタテインメント・ミュージアムです。 国際宇宙ステーションから見下ろした地球の実写映像などを楽しむことができる「シアター宙(ソラ)」は、珍しい見下ろし型のプラネタリウムとして話題を集めており、東京の新名所として期待されています。 当日は夏休みが始まったところということもあり、たくさんの子供たちで賑わっていました。 結論から申しますと、大人で […]

Webデザイン

文字装飾パターン集

バナーやキャンペーンの画像を作る際、ゴテゴテのグラデーションやテクスチャをふんだんに使った文字装飾、大変ですよね。 大体値段やキャンペーンの内容となると分かりやすく金赤やゴールドが使用されるので毎度毎度マンネリになりがちだったりします。 そこで今日は、文字装飾のパターンを集めました。 Fireworksで開いてコピーし、「Shift + Ctrl + Alt + V」の属性をペーストを行うとそのままご自分のデザインに反映できます。

Webデザイン

【キャラクターデザイン】

今、社内でスマートフォンアプリを作りたいなぁと相談していたりします。 爆発的に流行るアプリなんかはやはりキャラクターが決め手だったりするんですよね。アルパカやマンボウ、なめこetc…可愛らしいですよね。私もちょこちょこと使用したいキャラクターをぼんやり考えてみたりしています。 せっかくなので綺麗に書き直してこちらに載せることに。

Webデザイン

TwitterまんがPart30

おはようございます。毎日暑いですね。私はというもの、相変わらず夏になるとバテてしまいます。皆様いかがお過ごしでしょうか。 最近の社内では夏に向けての(もう夏ですが)ダイエットも兼ねてか、「そば部」が発足しています。特に改めて部をつくったわけではないのですが、なんとなくランチにざるそばを食べる習慣ができてしまいました。いつもつい、3人くらいで蕎麦をすすっています。今のところはローソンのいなりずしがセットになっているのが一番人気です。曰くあまり無理して蕎麦だけで我慢すると「夕方く […]

Webデザイン

「LINEスタンプシュミレーター」を作りました。

LINEクリエイターズスタンプ、だいぶ盛況のようですね。審査を無事通過してマーケットに乗ったスタンプも4000を超えたようです。私もいくつか購入して使用してみたのですが、どうも実際にトークの場で貼られるとスタンプがなんかでっかい…。 制作している時は気付かないものなのですが、規約の370*320pxにめいっぱいで作ると実機で見ると全く違ったサイズ感になってしまい、結局なんだか使い心地が良くなくてそのまま使わなくなってしまったりします。 そこで失敗しないためにも、「LINEスタ […]

マークアップ

【怖くないJavaScript + jQuery】コンテンツの高さを自動で調整してくれるjs

ウィンドウの高さに対して、コンテンツの内容が少ない場合、footerより下の部分が真っ白になってしまう…しかし邪魔だしfooterをfixedにはしたくない。そんな時ってありますよね。 Sticky footerなど他にも手はありますが、内容が動的の場合使えなかったりするんですよね。 そんな時に便利な、コンテンツの高さを自動調整してくれるjsを作ってみましょう。実はとっても簡単なんです。 コンテンツ部以外(headerとfooterなど)の高さが固定であることが条 […]

Webデザイン

手書き風アイコン素材25個

今回は、アイコン素材を制作してみました。 ゆるい雰囲気の手書き風アイコンです。カラーもビビッドめにまとめました。 あぁーー、これね、こういうのよく使うよー、といった感じのを重点的に。 フリー素材で、商用可です。まとめてダウンロードはこちらから。 Fireworksで開くとパスデータになっています。 近況 オフィスの窓を開けると、とても綺麗な紫陽花が咲いています。 今年の梅雨は長いと聞いていたのに、もう明けてしまうなんて噂もちらほら聞きますね。あまり雨が降っていない様子ですが、 […]

雑記

タスクの合間の変な落書き集 Part2

なんとなしに、考え事をしている時にサッと筆が走る、落書き。私はというもの、勝手に手が動いてしまうことが多々ある人間です。 日々アイデアを練る時に大切だと思っています。 しかし後々見返してみると、私何考えてたんだろうな…って疑問に感じることが多々あります。 せっかくなのでこちらに載せてみることに。 楽しいらくがき ▲ わぁい、じゃないです。ダメなやつです。 ▲ 多分、おせんべいだと思います。 ▲ 先日日本ダービーを見に行きました。よっぽど楽しかったんでしょうと思いま […]

Webデザイン

【Fireworks】人物シルエット素材11枚

弊社のある渋谷は今日も雨です。梅雨の時期、じめじめして嫌になってしまいますね。湿気は苦手です。 さて、今日は久しぶりに人物のシルエット素材を作成しました。Fireworksのパスになっています。 私用商用自由にご利用ください。zipはこちらから。 色の違う所は取り除いたりできるようになっています。 素材

マークアップ

【怖くないJavaScript + jQuery】クリックで要素を追加・削除する

今日は要素の追加・削除のパターンをご紹介します。 分かりやすいものだけ集めてみました。今回のデモファイルはこちら。 prepend:要素の内部の先頭に追加(子要素) ▼クリックでspanが追加 prepend p 「prepend()」は要素の内部の先頭に()内のタグを追加します。記述はこんなかんじ。 【HTML】 今回はbtn_demoAをクリックした時で処理しています。 demoAとidをつけたdivにpタグを入れ子にしています。idやタグはjsに合わせていれば自由に書き […]

Webデザイン

TwitterまんがPart29

おはようございます。すっかり初夏の陽気ですが、皆様如何お過ごしでしょうか。 私はというもの、花粉症のような症状で一日中クシャミが出て悩まされております。今年初めてのことなのでどうやら花粉症デビューしてしまったようです…つらいですね。 さて、今日もまんがを書かせて頂きました。 私はじわっと来るようなシュールなネタが好きなんですが、どうでしょう。お仕事の合間、息抜きになれば幸いです。 噛んだ? 本日書かせて頂いたツイート 今日のツイートはこちら。 最近私も頭ではカルピスサワーって […]

Webデザイン

【デザインまとめ】綺麗なデザインの管理画面 40種類

今日は管理画面のデザインを、まとめてみました。いつもより多めな40種類です。トレンドを反映してか、フラットデザインが多いですね。 通常の静的なサイトのデザインとは異なり、投稿がある場合無い場合とたくさんのパターンを考えながら制作しなければならないので、デザイン力が問われます。これらを日本語に置き換えるとまた違って見えたりするのですが、ひとまず、ご参考になればと思います。 ▼ The Kamarel デモサイト ▼ Apricot Bootstrap デモサイト ▼ The V […]

Webデザイン

【キャラクターデザイン】キャラクターの喜怒哀楽や行動を表すパターン

キャラクターのデザインをしていて基本的なことなのですがそれぞれのキャラクターに喜怒哀楽の表情があると思います。 それを表現するにあたって喜怒哀楽・行動のパターンを表すまんが記号や表情のパターンを並べてみました。 普通の表情 今回はこちらの蟹のキャラクターを使います。これが何もないシンプルな状態。 驚く 王冠のようなマークで驚きを表現します。これは簡単。 悲しむ 一番分かりやすいのが涙。大げさに流すくらいが分かりやすい。白目になったりもいい。 照れる 斜線を使って少し頬を赤らめ […]

Webデザイン

【デザインまとめ】海外のポートフォリオサイト15選

GWの中日、皆様いかがお過ごしでしょうか。通勤の電車の中も行楽の雰囲気が凄まじいですね。 お天気も良いですしどこかに出かけたくなりますね。弊社はカレンダー通り営業しております。 さて、今日は海外のポートフォリオのデザインをご紹介したいと思います。 国内にももちろん素敵なデザインやギミックのものがたくさんあるんですが、海外の個性色濃いサイトにどうしても憧れてしまいます。どうしてあんなに素敵に見えるんでしょうね。(外国語だからというのもあると思いますが…) 作り手の自己満足と言っ […]

Webデザイン

TwiiterまんがPart28

おはようございます。今日もぽかぽか暖かいですね。 最近の私はというもの、プライベートで話題のLINEスタンプを制作しています。 40個というボリュームをいかにクリアするか、それが課題ですがなんとか審査を通す所まで持っていけるよう頑張っています。 さて、本日の本題ですが、今日も漫画を書きました。 今日はちょっとしんみり。 繁忙期 本日書かせて頂いたツイート 今回書いたツイートはこちら。 先月の年度末の繁忙期、みなさんてんやわんやだったようですね。 こんなぽかぽか陽気だとふらっと […]

Webデザイン

「コメ展」に行ってきました。

先日、企画展「コメ展」に行ってきました。 会期:2014年2月28日(金) – 2014年6月15日(日) 展覧会ディレクター:佐藤卓、竹村真一 会場:六本木 21_21 DESIGN SIGHT URL:www.2121designsight.jp/program/kome/ 名前からしてお腹が空いてきそうですが、素敵な展覧会だったので折角なので記事に。 展示場内は静止画なら自由に撮って良いとのことで、Twitterのハッシュタグ「 #コメ展 」で呟くと展示場内 […]

Webデザイン

TwiiterまんがPart27

おはようございます。今朝も寒いですが皆様いかがお過ごしでしょうか。 最近の私は、週末川崎ラゾーナへと出向き、パンケーキ部などしておりました。 あまーいパンケーキも悪くないですが、やっぱりアボカドが乗っていたりするミールパンが好みです。 左がロージーズカフェのマッシュルーム&ベーコンサラダ、右がジェイエスのサーモンアボカド 美味しいごはん、幸せですね。お昼前にお腹がすいてしまいます。 さて、今日のTwitterまんがですが、今日はちょっと思わずお腹がすいてしまいそうなツイートを […]

マークアップ

【怖くないJavaScript + jQuery】「ページの先頭へ戻る」をスクロールで表示非表示を切り替え

おはようございます。今日もjQueryのことについて書いていきましょうね。 今日のは少し簡単です。 デモ ▲ 実は今回のデモは画面右下に表示されています。いわゆる「ページの先頭にもどる」ボタンですね。 ファーストビューでは表示されておらず、画面の下へ下へスクロールすると表示されます。反対に上に上にスクロールすると、また消えます。 デモのファイルはこちらからダウンロードできます。 Step1:まず下準備 こちらはいつもと同じです。まず必要なファイルを読み込みます。 header […]

Webデザイン

【ロゴデザイン】TV番組の題字

オリンピックが始まってからというもの、テレビがついている時間が増えたのですが、そこで感じたのが「番組タイトルのロゴってすごいな…」 というもの。ニュースやバラエティ、番組は多岐に渡りますが、冒頭で数秒移るタイトルロゴって気にしながら観察すると、よくこんなの作れるなと感心するような複雑なものが非常に多い。特に派手なものが多いですね。 並べて見てみたいと思ったので今回はTV番組の題字を集めてみました。 作るの大変そうだなぁと思うものを優先的に載せました。 特にバラエティ枠はもの凄 […]

1 4 5 6 7 8 13