メニューが楽しいサイトのまとめ | バシャログ。
ようやくSwitchを買いましてイカにドハマりしましたgamiです。お疲れ様です。 今回はメニューの楽しいサイトをまとめてみました。チェケラ！ Clorova バリ・ジャカルタに本拠地を置くメディア制作会社のサイトです。リッチ感すごい。単純にかっこいい！出てくる瞬間に写真がネガっぽくなるのもかっこいい。 IGOODI ちょうどいい速さで展開され、隅々まで動きが行き届いていて見てて気持ちがいいですね。 Microbrasserie À la Fût カナダにあるレストランのサイトです。いわゆるメガメニューなんですが文字を並べるだけじゃなく取り扱ってるビールもならべて、なおかつマウスオンでラベルが動くのいい。 Fully Studios - Motion on the web スウェーデンにある動画とウェブの制作会社のウェブサイト。トップのファーストビューがそのまま表示されます。イラストがかわ
マウスストーカーがすごいサイトまとめ | バシャログ。
マウスストーカーとは、画面上のカーソルにキラキラ追従していたあれです。個人サイトが隆盛を極めていたときによく見たあれです。サンプルは以下のリンクより参照されたし。 マウスストーカー１■文字■ 複数色のキラキラ すっかり見なくなったと思っていたら、最近このマウスストーカーを取り入れているサイトをちらほら見かけるようになりました。気になったデザインのものをいくつかピックアップしたいと思います。チェケラ！ Blend | A creative agency イタリアのクリエイティブエージェンシーのサイト。ここでは透過された円が追従してきますが、リンク可能なエリアに入ると大きくなって矢印が現れます。トップのマウスオンでぼかしが鮮明になる挙動もいい。 BASIC™ | Culture Manual 上のgifはメンバー紹介で、詳細がある場合は＋のオブジェクトが、閉じる時は×が追従します。他にも下に要
【Photoshop】描画モードを理解するその③ ～除算編～ | バシャログ。
こんにちは。今年の流行語大賞のノミネート語の半分以上を知らなかったmackyです。 今日は、Photoshop描画モードを理解するその③をやります。前回は乗算編でしたので今回は除算編をやろうと思います。 除算て？ 除算は、描画モードの中でも私は、ほとんど使ったことがありません^^;今回、社内の活動で写真を線画（ここでは鉛筆画）にするという作業があったためトライしてみたところ、案外簡単にできたのでメモしておこうと思います。 タダの写真がまるで自分が描いたかのようになりますので、ご興味ある方はどうぞ。 まず、除算というからには色と色を…割る（÷）わけですね。色を割るといわれても・・・ コチラのサイトで計算の仕方を説明してくれています。ちゃんと理解したいというかたは見てみてください。 Handy Web Design あまり、深く知る必要はないかもしれませんが、ポイントとして上のレイヤーのオブジ
【Photoshop】描画モードを理解するその② ～乗算編～ | バシャログ。
こんにちは。「72hours」というドキュメント番組にはまっているmackyです。 今日は、すっかり途絶えていた、Photoshop描画モードを理解するその②をやります。ということで、意外と便利な乗算についてまとめてみます。 乗算を理解する 乗算は、描画モードの中でも私は、特によく使っているモードの一つです。知っていると、「ああ！ここのフォントがない―。ロゴがないー。よし、必殺切り貼りだ。」なんて状況も（状況にもよりますが）ときとして超えてゆけるでしょう。 まず、乗算というからには色と色を掛け合わせるわけですね。 下のレイヤーのオブジェクトと上のレイヤーのオブジェクトの色を混ぜた色になって上のレイヤーのオブジェクトが表示されるのです。 乗算は、色の重なり感を表現したいときや、影の部分をより強調するときなどに活用できます。下レイヤーのテクスチャが透けるような仕上がりとなるので、合成する際にも
バシャログ。
【お知らせ】バシャログ。メンバーが所属する株式会社シーブレインのWebサイト制作サービスのサイトがリ... お知らせ
アイコンフォントFont AwesomeをPhotoshopやillustraterで使ってみる。 | バシャログ。
こんにちは。mackyです。 今日は、サイトデザイン時に、アイコンフォントのFont Awesomeをつかう方法をまとめようと思います。 フォントをインストール まず、Font Awesomeのサイトからフォントをダウンロードしましょう。 図の2つのファイルをインストールします。 意外と知らない？Cheatsheetの存在 では、実際にアイコンを使ってみましょう。 Photoshopを開いて新規ページを用意します。Font Awesomeのサイトから使いたいフォントをコピーします。 その際、Cheatsheetのページを使うと、どのブラウザでもコピーできて便利です。 というのは、以下のページからコピーしようとするとなぜかIEからしかできません。（詳しくいうと、ChromeとFirefoxはできませんでした。）私は普段Chromeを使っているのですが、Cheatsheetからはサクッとコピー
【Photoshop】描画モードを理解するその① ～スクリーンモード編～ | バシャログ。
こんにちは。mackyです。 photoshopやFireworksの描画モードは、バナーを作ったり写真を加工したりするのに使用しますが、 普段コーディングばかりでデザインはちょっと…という人に突然きてしまったデザインの依頼を想定し、 描画モードの説明とそれを使った加工方法をシリーズ（気分）で紹介していこうと思います。 私も、全ての描画モード使いこなせているわけではないのですが、知っているのといないのとでは、作業効率や簡単なバナー作成でもクオリティがちがってきます。 そして、今回もひきつづき使用するツールはPhotoshop CS5.1です。CC以外のみなさまもうしばらく頑張っていきましょう。 スクリーンモードを理解する まず、スクリーンを使うと、必ず元の色より明るくなります。 光の三原色(RGBカラー)の色の混ぜ方と似ていて、色を足せば足すほど白に近づきます。 ですが、個人的に、結果どん
バシャログ。がリニューアル！その経緯を振り返る | バシャログ。
こんにちはLatinです。 当社のWeb制作技術情報ブログ「バシャログ。」のデザインをリニューアルしました。 いかがでしょうか？少しは見やすくなったでしょうか？ 今日はそのお知らせと、リニューアルに至った経緯なんかもご紹介できればと思います。 リニューアル前のデザイン リニューアル前の当ブログですが、恥ずかしながら、かなりの問題点を抱えていました。 時代遅れの3カラムレイアウト 後回しになっていたモバイルユーザビリティ めっちゃ重いスクリプトてんこもり とまぁ、こんな感じです。 特に2番目、3番目については結構なクリティカルな問題だったのではないかと思ってます。 リニューアル後 記事の読みやすさを重視し、1カラムレイアウトを採用 鬱陶しかったLikeBoxやら、バナースペースやら、スペースを埋めるのに苦労したサイドバー達ともこれでようやくおさらばです。 レスポンシブウェブデザインで、モバイ
【Photoshop】人物を素早く切り抜く方法 | バシャログ。
こんにちは。mackyです。 もうすぐカレーの季節ですね。「CSS カレー」で検索したら（暇じゃないです）「フレームワークはカレーのルーだ！」って記事が引っかかりました。 この一文でイメージがつかめる素晴らしい例えですね。カレーってすごいですね。（暇じゃないです） さて、今日はタイトル通り、人物をいい感じに素早くキレイに切り抜く方法をご紹介するのですが、特に人物の服と背景が同化しちゃってるような写真の場合に使える技だと思います。 使用するツールはPhotoshop CS5.1です。 こんな感じの写真を用意します。 ※ロイヤリティフリーの素材を使用しています。 ポイント1：レイヤーを最低2つ以上複製しておく。 複製はいくつあっても構いませんが、最低2つは複製しておいてください。背景はひとまず非表示にしておきます。 ポイント2：明度を下げてしまおう。 一番上のレイヤーを選択し、調整レイヤーから
PhotoshopとIllustratorで角丸を作成、修正する方法を探ってみた。 | バシャログ。
こんにちは。mackyです。 今日は、タイトルにある2つのデザインツールを行ったり来たりしながら角丸という一見シンプルなテーマで掘り下げてみようと思います。 けっこう「へー」って思うところもあったのでまとめておきたいと思います。 Photoshop（環境：CS5.1） プラグインをいれてしまう。 Photoshopで角丸のオブジェクトを描くとき、単純に左のツールバーから角丸長方形ツールを選択しタブでWとHを入力、丸みも設定すれば完成。ですが、Photoshopはここからがちょっと力不足です。（※CCでは属性パネルから簡単に角丸の編集が可能になりました。参考：http://www.adobe.com/jp/jos/photoshopmagazine/howto/photoshop/rounded-rectangles.html） そんなときに使えるのが、「Rounded Rectangle
スマホサイトの矢印付きメニューをCSSのみで実装する。 | バシャログ。
こんにちは もうすぐ待ちにまったGWですね。今年は、多い人で11連休とかあるんじゃないでしょうか。そんなことしたら…もう、社会復帰できる自信がないmackyです。 さて、 そんな今日は、スマホサイトのメニューの定番デザインである、 矢印付きメニューをcssのみで実装してみようと思います。 CSSのみで実装する定番の矢印つきメニュー こんな感じです。 まずはHTMLを用意します。 HTML <ul> <li><a href="#">シーブレイン七不思議</a></li> <li><a href="#">シーブレインあるある</a></li> <li><a href="#">シーブレイン3つの掟</a></li> <li><a href="#">minamiが行く横浜うまいもの日記</a></li> </ul> css * { margin: 0; padding: 0; } a { disp
まだまだ使うよ！便利なFireworksの時短ペースト紹介 | バシャログ。
Dlifeで新たにスタートした「4400 未知からの生還者」が気になって仕方ないmackyです。Dlifeとビールさえあれば…。どうぞよろしくお願いします！ さて今日は、まだまだバリバリ使わせてもらっているFireworksの、ペーストにフォーカスしてみようと思います。 Fwの便利ペーストその① ～属性のペースト編～ 属性のことなるテキストを配置します。 一番上の属性に統一させます。 ではまず、 Ctrl+Cで統一させたい属性のテキストをコピーします。 次に、 属性を変更したいテキストを選択し、Ctrl+alt+shift+Vでペースト。すると… もう完成ですね。 ビギナーには知っておくと嬉しい時短ショートカットですね。 Fwの便利ペーストその② ～マスクのペースト編～ マスクの扱いは早めに制しておきたいですよね。 画像を用意します。 マスクしたい形のオブジェクトを描きます。 オブジェクト
最近リニューアルした弊社シーブレインのウェブサイトがさらに生まれ変わり、レスポンシブになりました！ | バシャログ。
昨日家に帰ったら、リビングに半額キャンペーン中のドーナツがまんまと 10 個置いてありました。 置いてあるなら仕方ないな…と、ダイエット中にもかかわらず 2 個食べた kimoto です。 さて、8/6 にリニューアルした、バシャログ。メンバー属するシーブレインのウェブサイトですが、あれから2ヶ月足らず、さらにプチリニューアルを行いました！ 前回のリニューアル時、時間が足らず果たせなかったレスポンシブ対応を施しました。 またそれに伴い、デザイン自体も少々見直し、さらにサイト全体的に統一感もアップさせています。 レスポンシブ対応にするためにそれなりに苦労もありましたが、それはまた別の担当者がとくとくと語ってくれると思います。そのあたりのテクニカルな話は、後日をお楽しみに。 まずはサイトを訪れてみてください。 これからも、バシャログ。および株式会社シーブレインをどうぞよろしくお願いいたします！
グレーカラーが美しいWEBサイト20選！ | バシャログ。
だんだん暑くなってきて朝の駅までダッシュがしんどくなってきました seki です。 どんなサイトを作りたいですか？の質問に対し、「アップルみたいな…」と言った返答をよく耳にするようになった近年。今回は少しテーマを変えて、グレー系サイトを作る時に、色見や色の組み合わせの参考にしたいWebサイトをいくつか集めてみたのでザックリとご紹介します。 綺麗なグレー系 淡いものから濃いものまで。写真や、さし色がとても生えるタイプ。 少し青･緑がかったグレー 少々青みの強いものも含まれますが濁った青・緑～グレーベースのもの。こちらはシンプルさに、少し高級感がプラスされるイメージでしょうか。白との相性抜群。 少し黄・茶がかったもの こちらも黄・茶の強いものも多いですが、黒・灰色との組み合わせが美しい。やさしい色合い。 －－－－－－－－－－－－－－－－－－ いかがでしょう。 見比べてみても、それぞれ、微妙に濃
クリスマスサイト集めたよ | バシャログ。
もうすぐクリスマスですね、toyama です。 宗教だとか難しい話はうっちゃって、クリスマス気分満載のサイトを集めてみました。 yahooとamazon まずは yahoo、amazon。 コンテンツは変えずにヘッダーにクリスマス用の画像を追加することでクリスマス仕様に変化。わずかな工数で雰囲気と心意気を伝えることができる手法です。 Yahoo!japan Amazon.co.jp： 通販 - ファッション、家電から食品まで Coca-Cola（コカ･コーラ） クリスマスといえばサンタクロース。 サンタクロースといえばノーマン・ロックウェルの描いたコカ・コーラ社のサンタクロース広告が有名です。そんなコカ・コーラ社のクリスマスコンテンツです。 Coca-Cola（コカ･コーラ）| Happy Christmas アンパンマン ポータルサイト こどもの味方、アンパンマンのポータルサイト。 従来
パートナー | WEBサイト制作 株式会社シーブレイン
Web サイト制作に必要な全工程の理解と知識 Web サイト制作に必要な全工程をワンストップサービスで提供可能。 一部の工程のみの対応でも、前後の工程に考慮した対応をします。 数百を超える Web サイト制作経験により培われた高いスキル。 効率的な制作手法による高い処理能力。 既存リソースの活用によるコストパフォーマンス オープンソースのソフトウェアやライブラリ、フレームワークなど、既存のリソースを積極的に活用することで顧客要望を実現します。 フル開発のほか、MovableTypeやWordPressなどブログシステムのカスタマイズでの対応も可能です。 データベースと連動した更新しやすい動的コンテンツや動画との連携など、ワンランク上のFLASHコンテンツを制作します。 ユーザの視点に立ち、使いやすいインターフェースデザインを設計します。 Web標準に準拠したクオリティの高いXHTML＋CS
マンガのような個性的なフォント40選 | バシャログ。
まさゆきの地図を手に入れたけど15階まで降りられない kimoto です。 もうちょっと弱い場所でレベル上げするか… 海外のサイトで、マンガで使われそうな、個性的なフォントがたくさん紹介されていました。 一部をご紹介します。 Burrito なんとなくメキシカンな感じのするフォント。アミーゴ！ Fighting Spirit なんとなく攻撃的な雰囲気なフォント。その名もファイティングスピリッツ！ Eyesis それぞれに目玉のついた、コミカルなフォント。 Chizzler すこしカッチリして、かつ漫画的。好きだなー。 その他、こちらでたくさん紹介されています。 どれも使いどころは限られますが、うまく使えば個性が出ること間違いなしです。
噴水効果とかシャワー効果とかマーケティングとか | バシャログ。
ちょっと前の本ですが、ご紹介。 「心理法則を活用して、効果的なWebサイトを作ろう！」てな本です。 50の心理法則とそれに即した事例の紹介→『それではこの効果をWebに落とし込んでみましょう！』という流れで構成されています。 取り上げられているのは、以下のような項目たち ・ツァイガルニック効果 ・ザイオンス効果 ・ハロー効果 ・初頭/親近効果 ・噴水/シャワー効果 全体的に読みやすくて分かりやすくて、ええ、とても有用な本だと思います。 （中には現実的に実現はちょっと難しいかなぁ、という項目もあるような気もしますが…） 心理マーケティングもので、ここまでWebサイト用に特化してまとめられている本はなかなか無いのではないのでしょうか。 さて、ではこの本の項目にもある「噴水効果」と「シャワー効果」を踏まえて、バシャログ。を見てみましょう。 ■ シャワー効果 デパートなどで、最上階に魅力的な商品や
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
明けましておめでとうございます。シーブレインからの年賀状をお届けします！ | バシャログ。
[読書の秋！秋の夜長にオススメ書籍] 第 3 回 ディフェンシブ・ウェブデザインの技術 ―「うまくいかないとき」に備えたデザイン、「上手に」間違えるためのデザイン | バシャログ。