Webデザイン

Webデザイン

iPhone/Android端末の解像度についてのまとめ(スマートフォン版)

こんにちは、工藤です。 今回はiPhone/Android端末の画面解像度について、サイトやアプリ作成用に個人的に簡潔な表が欲しかったので備考録がてらまとめておきます。 スマートフォンのみの情報です。 2016年1月現在の情報となります。 iPhone 本体名 ディスプレイ解像度(横×縦/px) 画面比率 Retina iPhone/iPhone 3G,3GS 320×480 3:2 1 iPhone 4,4S 640×960 3:2 2 iPhone 5,5S,5c 640 […]

Webデザイン

印象に残るメインビジュアルを集めました

こんにちは、工藤です。 今回はちょっと変わった、インパクトのあるメインビジュアルを集めました。 やっぱりサイトに入った時にすぐに目に入るものですから印象に残るようデザインしたいですよね。 にこにこ小児歯科 サイトへ 小児歯科のサイトです。 子どもの口の中がメインビジュアルになっているのが面白いです。 社会福祉法人富士会 富士保育園 サイトへ 水彩風のイラストに囲まれてメインビジュアルが切り替わります。 曲線やイラストからやわらかい印象を受けます。 ペエ歯科クリニック サイトへ […]

Webデザイン

参考にしたい ヘッダーデザインのまとめ

こんにちは、工藤です。 今回は参考にしたいヘッダーのデザインをまとめました。 株式会社LITALICO(りたりこ) サイトへ アイコンで色分けされているのが分かりやすいですね。 オンリー(ザ・スーパースーツストア)公式通販 サイトへ junhashimoto(ジュンハシモト)公式通販 サイトへ オーダースーツのHANABISHI サイトへ ていれぎの湯 サイトへ 縦書きのロゴがどんとのっています。サイトを見てみるとヘッダーの下の方が温泉の湯気のようになっていて面白いです。 K […]

Webデザイン

【商用利用OK】フリー写真素材サイト20選

こんにちは、工藤です。 いつもの自分用では若干ありますが、商用利用OKでフリー写真を提供してくださっているサイトをまとめました。(一部有料有) ご利用ガイドや写真ごとにある使用許諾などとあわせてご利用ください。 2015年11月13日現在の情報になります。 ぱくたそ サイトへ 利用規約 高品質・高解像度な写真がたくさんあります。 個人的には綺麗な風景写真が揃っているのがありがたいです。 人物は結構アクが強め…ですが広告などではインパクトがでますね。 写真AC サイトへ ご利用 […]

Webデザイン

イラストが魅力的なサイトのまとめ

こんにちは、工藤です。 今回はイラストが魅力的なサイトをまとめました。 STAY HOT いいぞ、もっとやれ。 – 日清カップヌードル サイトへ かなり濃いめのイラストとイラスト風に加工された写真のインパクトがすごいです。 フォトハウス ハピスタ サイトへ 手書きの感じと水彩やクレヨン風の効果がとても素敵です。 旅もじゃ サイトへ さりげなく下の方で船が動いたり電車が走っていたりします。 What is JUNIOR RESIDENT?-日本医科大学千葉北総病 サ […]

Webデザイン

気になって仕方がないこと 1コマ日記

素敵な若いお嬢さんのメガネケースに「うなぎの蒲焼き」シールが貼ってあるとは思いませんでした。 どうしてなんでしょう。とても気になりました。 なんとなく入ったコーヒーショップで何か面白いことがあると少し楽しい気持ちになりますね。 ちなみにこの「うなぎのかば焼き」シール、調べてみると1冊500枚入りで1000円くらいで購入できるようです。 販促シール専門店と言うサイトを見つけたのですが、眺めているとなんだか不思議な気持ちに。自分に全く縁の無いちょっと変わったサイトを眺めていると楽 […]

Webデザイン

からあげクン 1コマ日記

最近驚いたこと。 最近驚いたことです。 からあげクンって1986年にできたんですね。なんと今年で29歳。 当社のエンジニアさんに教えてもらってから、心の中でからあげ先輩と呼んでいます。 オフィスの近くにローソンがあり、毎日通っています。ローソンのからあげはとても好きです。 からあげクンだと昔あった桃味とオリーブ味が好きでした。 からあげクンをとりあげた専用のサイトまであるようです。 カラフルでかわいらしい。 「からあげ王国」 そしてなんと1000個に一個くらいの確率で、レアな […]

Webデザイン

夏のできごと 1コマ日記

本日の渋谷は雨。先週の陽気が嘘のように寒いですが皆様いかがお過ごしでしょうか。 最近の私はと言いますと、腰痛に悩まされています。オフィスでの座り仕事、職業柄なんでしょうか。 さて、今日はなんだかイラストが描きたくなったので、この夏起こったことを1コマ日記にしました。 ビットマップでの色塗りの作業も、たまにやると楽しいですね。

Webデザイン

文字装飾パターン集

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

Webデザイン

キャラクターを「見ないで書こう」

おはようございます。毎日暑いですが皆様いかがお過ごしでしょうか。 さて皆様、「見ないで描こう」という遊び、ご存知でしょうか。(他に正式名称あるんでしょうか。) 例えば、ガチャピン。スマホで検索してはいけません。頭の中にあるぼんやりとしたイメージを頼りに絵を描きます。 うろ覚えで出来上がった絵は何だかおかしくてちょっと楽しい、そんな遊びです。 ブログに何か絵を描きたいなと思って考えていたのですが、そういえばこの学生の頃流行ったなぁとこの遊びを思いだしたので、ちょっとやってみるこ […]

Webデザイン

印象に残った学校サイトを集めました

こんにちは。 今回は学校サイトを集めました。 ここ最近は学校の特色を出すためか様々なこだわりを感じるものがたくさんありますね。 ただその中でも学生さんや親御さんに情報をしっかり見せないといけないと思うので整理するのがなかなか難しそうです。 早稲田大学 サイトへ TOPの背景に動画を使用しているのでちょっと不思議な印象を受けますね。 三田国際学園 サイトへ 三角の要素が印象的です。あまりごちゃごちゃした感じはなく、情報が見やすいです。 大竹学園 大竹高等専修学校 サイトへ すご […]

Webデザイン

【バナーデザイン】Yahoo! JAPANの広告バナー

おはようございます。皆様梅雨のしっとりした季節、如何お過ごしでしょうか。 私は雨女のせいもあり、外出する時には何故か雨がぱらついてしまうので、私生活までしっとりと過ごしております… カラッとした季節が待ち遠しいですね。 横浜市の舞岡公園に行ってきました。ぼくのなつやすみみたいな風景、のどかでオススメスポットです! — さて、本日の本題ですが、今日はYahoo!JAPANのバナー広告を集めてみました。 老若男女、たくさんの人が閲覧する検索エンジンのトップページに掲載 […]

Webデザイン

コミュニティサイトのまとめ

こんにちは、工藤です。 今回はコミュニティサイトを色々調べてみました。 デザインで楽しそうな、参加したくなるような工夫な必要なのですがなかなか難しかったりします。 ことりっぷ サイトへ 女性向けガイドブック『ことりっぷ』のコミュニティサイトです。 読者投稿の記事でも写真が豊富で、旅に行った、旅に行きたい!という気分になります。 サイトもあまりごちゃごちゃせず見やすいです。 プレママスクエア サイトへ 妊娠を控えた、または子育て中の方へ向けてのコミュニティサイト。 TOPのコン […]

Webデザイン

Twitterまんが Part36

ついに関東も梅雨入りしたようですね。 毎日これから雨かと思うと憂鬱ですが、そんな気持ちがちょっと晴れるといいな、と思います。 本日もTwitterまんがを書きました。休憩の合間の息抜きにどうぞ。 LEGO 本日のツイート 本日書かせて頂いたツイートはこちら。 とってもかわいい。 バックナンバー あわせてこちらもどうぞ。 Part35 「社蓄川柳」 Part34 「流行りの」 Part33 「新米パパ」 Part32 「指きり」 Part31 「スーパーカップ」

Webデザイン

【デザインまとめ】ランディングページ16枚

皆様ランディングページって言葉ご存知でしょうか。例えば、楽天などで蟹何かを販売する時にずーっと説明が縦に長くてゴテゴテに装飾されたページ見たことがあるかと思います。あれがランディングページです。 キャッチコピー、コンセプト、安全性、効果、お客様の声etc… 普通のWebサイトとは異なり、新商品やおトクなプランなどの商材をより効果的にアピールするためのページですので、普段の作り方とは全く異なったテイストで制作されます。不思議なもので、延々と商品の効果をうたわれると、 […]

Webデザイン

【キャラクターデザイン】麻呂眉ねこ

猫の写真を眺めるのが好きなんですが、昨日ずっと眺めていたら降ってわいたようにキャラクターのイメージを思いつきまして。イメージを捨てちゃうのももったいないのでデータに起こしてみました。 ふっとい麻呂眉が特徴です。

Webデザイン

プレゼン資料作成に役立つ!図形ツールで作られたイラスト素材

最近、パワーポイントで資料を作る際に綺麗にまとめるコツを調べていたのですが、多くのチュートリアルでアイコンやイラストを使って視覚的に訴えかけることが勧められていました。しかし絵心もないし、イラスト素材探し出すのも一苦労…とお悩み方も多いのではないでしょうか。 ならば私が描きましょう!と発起してイラスト素材を作ってみました。 なんとこのイラスト素材、全てパワーポイントの図形を使って作られています。拡大縮小をかけても解像度が足りなくてモジャモジャになったりしません。色も自分好みに […]

Webデザイン

便利なCSS3ジェネレーターのまとめ

こんにちは。 またほとんど自分用ですがCSS3生成してくれるジェネレーターを整理したくてまとめました。 うった方がいいのは分かりつつ、やっぱり頼っちゃいますよね…。 グラデーション Ultimate CSS Gradient Generator サイトへ 以前からこちらを使用させていただいています。 使い勝手のいいサンプルが揃っています。 CSS Gradient Generator サイトへ 操作性がだいぶシンプルで使いやすいです。 CSS Sample サイトへ グラデー […]

Webデザイン

夏間近!ビールのブランドサイトを集めてみました

こんにちは、工藤です。 そろそろ関東圏はどんどん気温が上がってきましたね。そしてビールがのみたくなります よね? 弊社サービスのノミトモもそろそろ賑わう時期です。 今回はビールのブランドサイトを集めてみました。 一番搾り – キリン サイトへ 筆で描いたようなイメージが印象に残りますね。雰囲気が出ていてとても素敵です。 ちなみに工場見学で一番搾り麦汁をのんだのですがすごく甘くておいしかったです…。 夏いちばん – オリオンビール サイトへ 夏季限定のビ […]

Webデザイン

参考にしたいタイトルデザインまとめ

こんにちは、工藤です。 今回はさりげなく悩んでしまうタイトルのデザインを集めてみました。 ベネッセグループ ベネッセグループ なんばパークス -NAMBA PARKS- なんばパークス -NAMBA PARKS- 英語を使っていても日本語の表記がとなりにあるとうれしいですね。 OPEN-WORLD-ACADEMY OPEN WORLD ACADEMY 斜めの線でクールな印象を受けますね。 武蔵野美術大学 武蔵野美術大学 山崎医院 山崎医院 猿田彦神社 猿田彦神社 株式会社リラ […]

Webデザイン

【デザイン】アイコン・イラストをあしらったメインナビゲーション30選

こんにちは、工藤です。 今回はアイコンやイラストをあしらったメインナビゲーションを集めてみました。 01.倉敷芸術科学大学情報発信サイト「つなぐ」 倉敷芸術科学大学情報発信サイト「つなぐ」 アイコンがテキストより大きめです。 マウスオーバーをするとまたちょっと雰囲気の違った画像を見ることができます。 02.渋谷再開発と東急建設 渋谷再開発と東急建設 03.Joha Joha デンマーク発の子供服などを扱うサイト。イラストからマウスオーバー・クリックした際の動きもかわいいです。 […]

Webデザイン

[スマホ版]ログイン画面のデザインまとめ

こんにちは、工藤です。 前回が探していて楽しかったので今回はスマホサイトのログイン画面を色々見てみました。 スマホサイトではプレースホルダに注目しながら集めてみました。 プレースホルダを使用していない例 プレースホルダを紹介していない例です。 スマホサイトだと情報量が多い場合に高さを少しでもとってしまうことが難点ですが、ユーザーの立場からすると入力後の確認で正しい情報を入力できているかわかりやすいですよね。 ウィメンズパーク 会員IDのみの保存・両方の保存どちらか選ぶことがで […]

Webデザイン

デザイン公募まとめ

御存知でしょうか。今2016年度の年賀状デザインコンペ真っ盛りの時期だと言うこと。 とても気の早い話に思えますが毎年この時期です。早い所は皆が年始の休みが明けた頃に締切で、もう応募が終了していたりします。 aiデータを渡すので、デザイナーとしては割に合わない作業になりがちなんですが、ちょっとお小遣い稼ぎしたい時なんかにはぜひどうぞ。大体入賞すればそのまま商品化されます。 ◆2016年版 東急ハンズオリジナル年賀状デザインコンペ 締切:2015年05月18日 (月) 賞:大賞( […]

Webデザイン

【デザインの意味】都道府県の標章

こちら、日本の都道府県の標章です。先日まとめとして拝見したものなのですが、それぞれの意味を調べてみたらなかなか良い者になったので、記事にしてみました。 北海道 北海道開拓使が使用していた旗のデザインを元に、現代的にしたもの。先人の開拓者精神と雄々しく伸びる北海道の未来を表している。 —– 青森県 青森の地形を図案化したもの。カラーは深緑が指定してあり、余白の白地と合わせて意味が設定されている。白地は無限に広がる宇宙世界を表し、緑は躍進発展してやまない希 […]

Webデザイン

【デザインまとめ】綺麗なデザインの管理画面 30選

以前記事にした「【デザインまとめ】綺麗なデザインの管理画面 40種類 」、時間が経ってリンク先が消えていたりしますね。 また綺麗なデザインの管理画面も追加したいと思います。 サムネイルだけで見ると、全部似たようなものに見えてきますが、デモサイトを見てみると細かな部分でデザイナーさんの個性が出ていて面白いです。 ご参考になれば幸いです。 左に紺か黒のナビがあるやつ ◆Material Admin デモサイト ◆Edumix 黄緑がきれい デモサイト ◆Make デモサイト ◆C […]

1 2 3 4 5 10