サイトデザインをする上で、デザインがワンパターンになったり、煮詰まったりすると思います。そんな時、Instagram を使わない手はありません世界中のインスピレーション溢れるアート系の発信やデザイン系のイメージがたくさん参照できます本記事ではデザインのヒントになること間違いなしの海外のアートデザイン系の Instagram アカウントをご紹介します。
「Responsive Web Design JP」を運営されているA40さんのまとめ記事ここまでできる!Bootstrapで作られた国内のレスポンシブWebデザインのサイトまとめ20個が今日のGunosyで取り上げられていましたが、twitter Bootstrapを使ったレスポンシブWEBデザインのウェブサイトの事例が国内でもかなり増えてきました。 当社で制作した化粧品ブランド リボーテ -Re:beaute-様のサイトもありがたいことに、このまとめ記事に取り上げて頂いています。 いろいろなメディアに取り上げていただく中でのフィードバックとして、「twitter bootstrapがレスポンシブWEBデザインに便利なのはわかっているけど、どうやったらbootstrapっぽくないデザインにできるのかわからない」という声をよく聞きます。 僕も最初はそう思っていました。 一回触ってしまえば、
こんにちは、デザイナーのサリーです。 JSを書けない私が、いろいろとパララックスのJSを漁ってみて、一番書き方がシンプルでわかりやすそうだったのが「jarallax.js」でした。 使ってみたら簡単でいい感じでしたが、ところどころクセがあって悩んだ箇所があったので、覚え書きの意味も兼ねて、今回はjarallax.jsの使い方を解説します。 (注:スマホやタブレットでは上手く動きませんので、PCでご覧ください。詳しくはこちら「パララックスサイトをつくるときにディレクターが気をつけるべき4つのこと」をどうぞ。) jarallax.jsとは? パララックスの動きが実装できるJSです。その名の通りjQueryを使用します。 公式ページはこちら: http://www.jarallax.com/ HTML <!DOCTYPE html> <html lang="ja" dir="ltr"> <hea
しばらく前から気になっていたCSSを書く時に便利だという「Sass」と「Compass」を自分のサイトを作る時に使ってみました。 順番に導入の手順を追ってもいいのですが、検索すると多くのサイトが紹介していますので、私が見て参考にしたページをまとめておきたいと思います。 Sassとは まずSassとは何かと言うと、CSSを生成するためのメタ言語で、これを利用することでCSSを早く書けたり、記述が楽になったりします。 Sassの公式サイトは以下から。 Sass – Syntactically Awesome Stylesheets Compassとは Sassを拡張して、便利な機能を追加してくれるものです。ベンダープレフィックスを自動でつけてくれたり、リセットCSSを呼び出してくれたり、CSSスプライトを使えたりします。 Compassのドキュメントは以下から確認できます。 Compass H
ちょっと遅くなりましたが皆様あけましておめでとうございます! さて、新年一発目は先日こそっとあけおめコンテンツとして公開させて頂いた『 バンクーバーな僕ら – 新年あけましておめでとう巨大4コマ』で遊びで作ったパララックスページの作り方に関するお話です。 このパララックス漫画作る事になった時、実は こんな状況だったのでとにかく完全に時間との勝負だったんですが、日々パララックスに関する情報には目を通すようにしてたおかげ?もあって、リソース関係には困らなかったのでなんとかギリギリ間に合わせる事が出来ました。 今日はそんなリソース集としてお世話になった作者の方々への感謝の気持ちと、このパララックスサイトってどうやって動いてんの?ってご質問もあったので、折角だしまずは簡単に今回パララックスページを作った手順と作り方のサンプルを全部ご紹介させて頂ければと思います! ぶっちゃけお客さんに出す内容でも、
作成:2012/12/25 更新:2014/11/01 Webサービス > ちょこちょこっと触っただけで、プロっぽいサイトが無料で作れる 今回はブログじゃないサイトをドラッグ&ドロップで簡単に作成出来る2012年までに話題となったサービスを用途ごとにまとめました。 使い方をどこよりも詳しく解説してあるサイトのURLもつけてます。 エンジニア速報は Twitter の@commteで配信しています。 もくじ 1.まとめサイトを作る 2.ネットショップを作る 3.ホームページを作る 4.ポートフォリオサイトを作る 5.おしゃれなECサイトを作る 6.全部入り企業サイトを作る 7.コーポレートサイトを作る 8.レスポンシブ対応サイトを作る 9.HTML5サイトを作る 10.ビジネス用無料WordPressテーマ - レスポンシブ対応 11.デザイナー向けポートフォリオページ 12.ブートストラッ
話し合い Webサイトの制作に向けて、まず最初にする事は、依頼主についての情報を収集することです。依頼主と話し合い、どんなサイトにしたいのか、方向性を決めてゆきます。 依頼主との話し合いでは、以下の2点について、しっかりと決めておく事が大切です。 サイトにどんな情報を入れるか、どんな人に向けて発信するか、サイトをどう活用していきたいかなど、サイトを立ち上げる目的は何かを確かめる。 どんな雰囲気のサイトにしたいか、理想とするサイトや、希望・要望を聞きながら、どういうデザインにするかイメージを固める。 また、同業他社のサイトを片っ端から見まくる事。今回の場合、喫茶店やパン屋さん、ケーキ屋さんなんかが参考になるかもですね。他のサイトではどんなコンテンツがあるか、どんな見せ方をしてるかとか、この業種だとどんな色遣いのサイトが多いのかとか、たくさんみる事で、刺激になったり、イメージが掴めたりします。
2014年8月17日 Webサイト制作 8回に渡り連載した「実践で学ぶWebサイト制作ガイド」がついに終わったので、ここで簡単にまとめておきます。この記事では基本的な流れを説明していますが、リンクをクリックでより詳しい説明記事を読むことができます。これからWebサイトを作ってみたい!という人のお役に立てればいいなあと思います :) サンプルファイルもあるので、ご自由にダウンロードしてくださいね! ↑私が10年以上利用している会計ソフト! サンプルファイル 今回作成したファイルをサンプルとして配布します。参考になれば幸いです。説明するために制作したものなので、学習目的以外でのご利用はご遠慮ください。Google Chrome, Safari, Firefox, IE8・9で動作確認済み。 デモ ダウンロード 1. プランニング 誰のため?何のため?Webサイトを作り始める前に。 突然Phot
Awesome and has more than a degree. We head out one. What it is overwhelming. It is dangerous stuff. Amazing what moves the people. And, in the sense of the excitement, the world can not be changed only amazing thing. I want to meet those amazing, really want to be. I think so anyone, I want to share with everyone and wow wow. It is amazing, amazing thing. Than it really is not that amazing. From
Circle Controller HUE/360 Ver.0.1.3 © 2012 SAUCER.JP
お久しぶりです。デザイナーの野田です。 まず、今回の記事を見ていただく前に、前回と前々回に書かせていただきました。 「必読!5分でわかるレスポンシブWebデザインまとめ」 「必読!5分でわかるレスポンシブWebデザインまとめ Pt.2」 を読んでいただけるとスムーズです。 今回で、【必読!5分でわかるレスポンシブWebデザインまとめ】のシリーズも最後にさせていただきますので、少しコンテンツ量が多くなります。 100% 5分では分らないので、タイトルはスルーしてやってください。 様々なサイトでレスポンシブWebデザインについて紹介されていますが、制作方法が異なっていたり、内容が少し難しいと感じる部分がありました。 この記事は、ディレクターの方やデザイナーの方、どちらにも理解しやすいように書かせていただいてます。 また、これまでレスポンシブWebデザインについてやってきましたが、基本的な部分で
[CSS]高性能すぎてビックリしました、レスポンシブデザイン用の超軽量フレームワーク -Kube Framework
先日このブログをリニューアルさせて頂いた旨をご報告させて頂きましたが、今回のリニューアルの主目的だったレスポンシブデザイン化について、とにかく効率優先で作業させて頂いた時のリソース関連や情報を一度僕自身の忘備録として抜粋してまとめさせて頂こうと思います!以前別のブログを作った時もそうですが、基本僕はとにかく効率重視派です。細部に渡る美しいデザインや、ガリガリのプログラミング。標準に法ったコーディングとかはその道のスペシャリストが仲間内に居るので、今回も僕は効率化に焦点を当てています! ご紹介させて頂くのは主にFacebookやTwitter周りで共有させて頂いてきたリソースばかりですが、実際に使ってみると見えてくる注意点や、戸惑った部分、周りのデザイナーにも知っておいて欲しい部分等が見え隠れしてきたので、まずはその辺りを中心に、作業ステップ毎に簡単にご説明させて頂こうと思います。 僕と同じ
ユーザーに届ける価値を徹底的に追求する マーケティングを提供します © Copyright 2022 バズ部. All rights reserved. WEBサイトのデザインは、誰もが頭を悩ませる部分だ。 「どういう配色なら良い印象を持ってもらうことができるのか?」「どのレイアウトならコンバージョンが上がるのか?」など、様々なところまで考えを張り巡らさなければいけないからだ。 そこで本日は、The Art of Color Coordination というインフォグラフィックをご紹介する。これを見れば、WEB配色の基本の2大原理と、今すぐに使える6つの配色パターンがすぐに分かる。 そして、初心者でも、統一感のある配色のWEBサイトを作るための大きな助けとなるはずだ。 WEB配色の2大原理と6つの配色パターン画像を拡大して表示する ※追記:インフォグラフィックの最後のクレジットの部分が途切
82 views jQueryの社内勉強会用スライドです。だいたい1時間で終われるように、前編・後編に分けています。 後編は6月以降で公開を予定しています。 More… jQueryの社内勉強会用スライドです。だいたい1時間で終われるように、前編・後編に分けています。 後編は6月以降で公開を予定しています。 このスライドを作るにあたって、書籍「WebデザイナーのためのjQuery入門」をかなり参考にしています。 Webデザイナーのためのjquery入門2(前編) — Presentation Transcript Webデザイナーのための jQuery入門 -覚醒編(前編) -jQueryのコードを自分で考えて書けるようになろう! 目標 日々の業務にjQueryを取り入れて、 自分で何かを作れるようになる。 大まかな内容1. 何かを取ってくる 2. それに何かをする3. まとめ 1
デザイナーになりたいって思った時にPhotoshopやIllustrator、cssやhtmlを勉強しなきゃな〜><て考えると思うのですが、技術的なことを学ぶ前にまずデザインが出来なきゃ始まりませんよね。 センス?かっこ良さ?奇麗さ?良いデザインにしたいけど、何をしたらいいかわからない。そんな時に何を考えたら良いのかデザインの基本をまとめてみようと思います XD はじめに 良いデザインって? 最良の方法? 1.コンテンツの目的 2.ターゲット 3.これらを組み合わせた例 デザインの基本 1.書体について 2.ジャンプ率 3.ホワイトスペースを生かす >ホワイトスペースで情報を分割する >ホワイトスペースで囲む >ホワイトスペースにあえてはみ出す 最後に はじめに デザインという言葉を聞くと、かっこいい、かわいい、おしゃれ、きれい、などと感覚的なものを思い浮かべる方が多いのではないでしょうか
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く