WEBデザインのセオリー
WEBデザインにおけるセオリーの定番はいくつかある。 規則・不規則、動線・導線、配色、利便性、アクセシビリティ考慮や、人間工学に基づく動作設計。 挙げるとキリが無いので、ぜひこの記事を書いた発端である「Webデザインセオリー Advent Calender 2015」にきっと有用な記事がこれからたくさん挙がるので乞うご期待！ 僕個人として、セオリーと聞いて先ず一番に思ったのは OS・ブラウザ・デバイスに対する適切な設計 デザインツールや紙の上だけでデザインすると、どうしても抜けるところが出てくるので、やはりPCやスマフォ実機テストやプロトタイプテスト、出来るだけ本番に近いサーバ環境でのテストサイト構築がWEBデザインでも重要なのは変わらないところ。 気をつけたいポイント OSやブラウザそのものが持っている動作を損なわないこととか。 PCだったら、スクロールや右クリック、マウス
アイキャッチ画像・ロゴ作成のための6つの優秀な無料ツール / Maka-Veli .com
事情があって、プロのグラフィック・デザイナーを雇えない場合はありませんか。コストが問題であったり、時間に追われていたり…といったことが原因で。あるいは、デザインの才能はあるけれど、ITに弱いという人もいるかもしれませんね。こうしたことが身に覚えがある方には、ブログ用のシンプルな画像やウェブサイト用のロゴを簡単に速く作ることができる優秀な無料ツールがある、というのは嬉しい情報ではないかと思います。 以下の6つのツールはロガスターのおすすめです。 文字通り数分で、シンプルかつ綺麗な画像やロゴが、誰でも作れます！ 1. LiveLuvCreate LiveLuvCreateはほとんどの人が使いやすいと感じる画像作成サイトです。 LiveLuvCreateを使えば、一つの背景画像から複数画像のコラージュまで、様々な種類のデザインレイアウトから選ぶことができます。三つのテキストエリアでは沢山
いまWebサイトで流行ってる色 / Maka-Veli .com
CATK http://catk.de/ #513baa #6445e0 Frank Chimero http://www.frankchimero.com/ #00deb7 #5fe2ff #6144b0 #ff4a5d #fff3cd Prospek https://prospek.ca/ #46b085 Mixd http://www.mixd.co.uk/ #1c4bbe Flavor http://www.madebyflavor.com/ #f84c74 #9f6cc8 #4d9ff5 #4bdcb5 Build in Amsterdam http://www.buildinamsterdam.com/ #79a596 #222327 Socialist http://www.sociali.st/ #f53e2e #0b0b0b Square https://s
#Font 和文（日本語）フォントメーカー 一覧 / Maka-Veli .com
和文（日本語）有料フォントをざざーっと見比べたい時って皆さんどうしてますかね？ って友人に聞かれて、そういえば欧文みたいにまたいでサクサク見れたらいいのになぁーなんて思ってて。僕は本とか雑誌とかで探したり、フォントメーカーサイトを見まわったりしてるんですが、何か良いのご存知ないでしょうか？ そんなわけで、よく使っていたり、買いたいなーって狙ってるの合わせて、和文フォントメーカーサイトを挙げておきますね。 モリサワ http://www.morisawa.co.jp/ AXIS http://www.axisfont.com/ フォントワークス http://www.fontworks.co.jp アドビ http://www.adobe.com/jp/products/type.html 大日本スクリーン http://www.screen.co.jp/ga_product/
【スウォッチ】 綺麗だなと思った写真からカラーパレット化してストックしておく
エイプリル・フールですね。でもこの記事はネタじゃないので普通に読んでいただければと思います（笑）あ、そういえば今日はヒゲを剃りましたよ。ちょっと剃り残しちゃったけど、すぐ戻ります。 さて、Dribbbleとかってそれぞれの作品にカラーパレットが登録されていますよね。 それから検索できたり、便利。 Dribbbleのカラーパレット。.acoファイル(Color Swatches)もダウンロード出来る なんかキレイなカラーパレットって、見てると嬉しくなりませんか？ なりませんかそうですか 好きな写真からカラーパレットを作る 普段、綺麗だなーと思った写真から、メインの色を抽出してカラーパレットとして並べておくんです。 並んだカラーパレットには名前なんてつけてあげちゃって。 根暗でしょう？ でもけっこうデザインする時に役に立つんです。 色の組み合わせ、感情というかストーリーが出
自分がロゴを作る時に意識してるポイント / Maka-Veli .com
こないだロゴを変えてサイトデザインも変えたわけですが、ロゴはもっともっともっと時間かけてやりたいところだったんですが、自分の性格上、それだといつまで経ってもやらないので一気に勢いでやりました。自分のブログですから、また気が向いたらマイナーチェンジを加えていく予定です。 自分のブログなんかでなく、お客さまのロゴ制作をする上で注意している点がいくつかありますので、今回はその辺りを書いてみようと思います。せっかくなのでMaka-Veli.comロゴと併せて とにかく最初は「作らない事」これにつきます まず、とにかく下調べ とにかく競合他社を調べまくります。 どんなロゴを使っているか そのロゴからどんな雰囲気を感じ取れるか どんな人が顧客、潜在顧客なのか（ターゲット） ここで仰天。教えてもらったんですが、なんと有名アニメ（？）のキャラと丸かぶりでしたよ。 良い悪例なので晒しておきます
なんとWordPressプラグインまである。多彩なエフェクトでレスポンシブなフリーのjQueryスライドショー『Camera』 / Maka-Veli .com
なんだか話題になってるみたいですね？『Camera』というスライドショー。 特徴としては レスポンシブ 多機能、ハイクオリティ 多彩なエフェクト スキンも多数用意 WordPressで管理できる という感じなのですが、WordPressプラグインは本当にびっくりしました。 ウィンドウリサイズするとちゃんとレスポンシブ WordPressプラグイン。管理画面もしっかり用意されている 管理画面上でエフェクト等が細かく設定可能 他にも多数機能あり フリーなんですが、サポート（寄付）してね、というスタンスなのでもしよければ寄付して使ってみてはいかがでしょうか Camera http://www.pixedelic.com/plugins/camera/ WordPressはこちらから http://wordpress.org/extend/plugins/camera-sli
PhotoshopのGPU/OpenGLって使ってる？ 僕が使ってるお気に入り機能まとめ / Maka-Veli .com
メモリ食いますしグラボによっては使えないそうですが、皆さんGPU/OpenGLって使ってますか？僕は一応使ってます。使いこなせてないと思いますが。けっこう便利な小技が揃ってるので、個人的に気に入った機能をまとめました。使った事無い方は是非一度お試しください。 それと、3Dが出来るのは大きいかもしれないですね。使い方によっては面白い装飾が作れます。 が、3Dに関しては知識不足の為、省きます。 CS4から、あるいはCS5から導入された物が散らばってますが、 僕の環境が5.5なので5.5前提で書いていきます。ちなみにWinですが、Macも部分併記。 それと、恐らくCS6は微妙にどこか違うはず。6での追加機能も特に調べて無いです。 なんだよCS6書けよとご不満の方、CS6買って！CC1年でも良いです。ぜひ！ フリップ スマホ的な感じで、するするーっと動くようになります。 [Spac
そのデザイン処理、こんな風に工夫すればもっと良い物になりますよ / Maka-Veli .com
お前偉そうだなシリーズ第一弾 まぁ全部、全体のデザイン次第ですし、流行りモノ感もありますが。 ちょっとだけ変えると、グッとクオリティ上がりますよー的な小ネタです。そしてかなり個人的趣味です。 シャドウ ドロップシャドウなんかは手軽にクオリティ上げられていいですよね。 ただシャドウはつけすぎる(濃すぎる)と主張が強くて重くなりがち。 シャドウ自体はただの効果・装飾ですから、本体を引き締める程度にかけておけば良いと思います。 また、単なる上下・左右のシャドウではなく、球体・曲線でシャドウを上手く入れていくと面白いですよ。柔らかみもありますし。 グラデーション 立体感を出してチープな印象を防げるグラデ。 ただ、最近はベタ塗りでビビットに見せる装飾が流行ってきましたね。 思い切ってベタに変えるのも手。 もしくは、かなり差を狭くして「これグラデ？」と思わせるくらいのモノが良いかも
最近見つけた、お気に入りのサイト10選【2012年11月版】 / Maka-Veli .com
11月といえば好きなブログを告白する月のようですが、それはまたの機会にして・・・ いつオープンしたかはわかりませんが、最近見つけたサイトで個人的にかつ直感的に「いいね！」と思ったサイトを不定期で更新していこうかなと思います。※画像クリックで拡大。サイトへはURLリンクからどうぞ。 La Grange http://la-grange.ca/ とにかく細部までこだわりを感じるポートフォリオサイト。 動画のセンスも凄く良いです。 5emegauche http://www.5emegauche.com/ 各ページにユーモアがあって凄く楽しめるサイト。 agence というページがユニークです。どうやってるんだろう？軽い衝撃。 Buses at the Brewery http://www.busesatthebrewery.com/ シンプルな構造だけど飽きさせない、上手く見
クリエイター向け、まとめのまとめ / Maka-Veli .com
機械的でごめんない。サイト名は割愛させていただきます。掲載内容・順番に深い意味は特にありません。 お金もらって書いて、とかそういうのでも無いっす。 デザイン / 参考 【クリエイター必見】創作意欲が湧くデザイン 参考になるWebデザインリンク集まとめ Webデザイナーなら押さえておきたい、今月の優れたWebデザイン（2012年7月）まとめ11個 ハイクオリティな最近のパララックスWebデザインまとめ13個 ポートフォリオ作ろうぜ！参考サイト、リンクまとめ9つ 『さすがデザイナー…！』と思わされるクリエイティブな名刺デザイン集 配色のセンスをゼロから習得するために役立つスライドまとめ5つ GIFアニメを効果的に使ったサイトまとめ4つ ここまでするのか！アイデア満載の採用サイト おしゃれでかわいいポスターデザイン集 【デザイン】面白いアイディアの広告ギャラリーまとめ HTML5で書かれたス
Google AdWordsのキーワードツールはSEOだけに役立つものではない。実務で役立つディレクションの話 / Maka-Veli .com
という感じで、ズラズラと出てきます。検索数やら競合なんかをよく見てキーワードを決めますよね。これをサイトの設計、主にナビゲーションに用います。勘の良い方はお気づきだと思いますが、これを活用すれば「ユーザーが知りたいキーワード」が見えてきます。 ユーザーは、自分が求めているワードを探します。 訪れた際に自分が探している「言葉」が無いと直帰率が上がってしまう定説はご存知だと思いますが、ファーストビューで探している言葉が非常に重要です。例えば産婦人科に強い病院で「当院について」 と記載されているよりも、「当院の産婦人科」と記載されていた方が産婦人科をターゲットにしているサイトの場合はコンバージョン率は上がるわけです。検索が多い物は、ユーザーが求めているワードになります。検索をかけた言葉は必ずといっていい程サイト内でも探されます。まさにこれがキーワードになります。既にコンテンツが整理されている
Web制作や仕事に役立つGoogle活用術 / Maka-Veli .com
まぁーーよくあるポストですけど、Web制作で役立つ事で僕がよく使っているものをご紹介。 Chromeとかの事を書き出したらキリが無いので今回は検索術程度に。 請求書発送用に。住所から郵便番号を一発検索 google検索窓に「住所」スペース「郵便番号」で出ます。 打ち合わせ用に。乗り換え案内 Google transit ってやつですね。 検索窓に「駅名 駅名」の後に「乗換」で検索に候補 が出るので [Google 乗換案内] をクリックで出てきます。 地図制作用に。「駅から何分」を調べる 上記の方法や、もしくはルート・乗換案内から、出発と行き先を入力して「車」「徒歩」などのアイコンをクリックするとルートが出ますが、 移動に必要な時間も表示されるので、地図の作成時などに役立ちます。 勉強用に。技術本を読み漁る Googleブックスのレビューは一部分表示だけだと思ってる方がけっ
お問い合わせフォームのWordPressプラグインのinquiry form creatorが便利だった。 / Maka-Veli .com
有名なようですし日本人Developerさんだったので既にご存知だろうと思いますけど、使ってみてなかなか痒いところに手が届いてくれたのでご紹介。あー、これはクライアントワークで使えるなぁーと思いました。簡単なフォーム程度でOKのサイトだったらコレで十分なんじゃないでしょうか。 inquiry form creatorの便利だったところ 日本語 確認画面、サンキュー画面がある フォーム項目の追加が簡単 標準でバリデーションがけっこうある ユーザーに自動返信ができる お問い合わせ内容が管理画面上で確認できる お問い合わせ内容をCSVに落とせる と、思ったんですが、同作者さん( horike 氏) の新しい（？）フォームプラグイン Trust Form のが良さそうですね。 アップデート日時が古いからおかしいなと思ったらこんなのあったのですねー・・・orz （そういえば前にWP詳しい人がT
ロゴの扱い方でプロとアマの差が出る。アイソレーションゾーンとレギュレーション・ビジュアルアイデンティティについて / Maka-Veli .com
Webサイトを眺めていると、よくロゴの扱い方が雑な物をよく見受けられます。どうもWebの場合はそれが多く見られる気がします。「印刷をしない」 からでしょうか？僕も当時、よく叱られてました・・・ アイソレーションゾーンとは アイソレーションゾーンとは、ロゴ等の周りにある『余白』の事です。 ロゴ周りでなくても、キャッチコピーやタイトルの周りに取ることが多いはずです。 タイトルやキャッチコピーなどの場合は、 ジャンプ率を高めに設定する場合は2~4倍くらいでも良いと思います。 逆にジャンプ率を低めに設定した、あまり強調を必要としない場合でも、 1つ分くらいは空けるとすっきりしますね。 スペースを上手く使える人はプロデザイナーっぽいですよね。 ホワイトスペースは「無駄」じゃありません。 隙間があるからといって、あれこれ詰め込むのはいかにも素人っぽいです。 ロゴレギュレーション 大
ブランディングとは何か。ブランディング活動の基本をWeb制作時に意識しよう。 第三弾『Webサイトを構築する上で注意すべきポイント』 / Maka-Veli .com
全12カテゴリー。分野別で見る、 Webサイトを構築する上でそれぞれ注意すべきポイント Webサイトの目標＝プロジェクトの目標、ではないということ。 続：Webサイトを構築する上で注意すべきポイント に続き、第三弾です。 前回までは、業界別それぞれの注意点や、そもそもサイトを作るという事とは？などについて書いてきましたが、今回はもう少し深く、マーケティングを視野に入れて考えてみたいと思います。企業のブランディングについてです。 そもそもブランディングとは何か ブランディングとは、企業、法人がお客さまやユーザー等へ、自社のブランドを構築・訴求する為の活動その物です。ロゴやデザインに留まらず、接客方針、キャッチコピー、地域性など、様々なモノが対象になり、それを伝える事、そしてターゲットの頭・心にその概念を留めさせ、同業他社との差別化を図る為に行います。 良質なモノに、ある特定の印が付
無料で聴けて、もう作業用BGMに困らない。ミュージックビデオを次々に流してループしてくれる個人的に超オススメサイト / Maka-Veli .com
色々あるツールの中で、僕がよく使うサイトをご紹介。 洋楽がメインなので、僕の趣味と合う方向けですが・・・ Musictonic アルゴリズムはわかりませんが、 アーティスト名などを入力すると、ミュージックビデオをひたすら流してくれます。 デザインも素敵で、シェアボタンもあるので シェアしたい時にもサクっと紹介できるのが嬉しい。 使いやすいので、一番使ってます。 例えば「Capsule」とかって入力すると・・・ 左に再生リスト。 右に関連するキーワード（例えば「きゃりーぱみゅぱみゅ」とか「中田ヤスタカ」とか）が並びます。 けっこう「あれ、次何聴こうかなー」とか悩むんですよね。こういうのって。 なので凄く助かります。 YesYesY’all これも本当オススメ！ 音楽聴こうかなって思った時、「あれ聴こう！」と出れば良いですけど、大体聴きたい曲って出て来ないんですよ。
Maka-Veli.com / ブログを書く時は絶対にこの「たった一つの事」を注意した方が良いと思う。
あえて「いかにも」なタイトルにしました。釣りでタイトルに「絶対に」とか入れるのはあまり好きな方じゃないのですが、本当に注意した方が良いと思ったのであえて書きました。ただ、これは正直公開するか悩んでました。自戒の意味で書いておいたのですが、ずっと下書きのままでも意味が無いので。。とりあえず 勿体ぶらずにさくっと書いときますね。 たった一つの事 = 「ライティング舐めたらあかん」 もやっとしてしてすいません。理由は以下に。 並立しないプロフェッショナル ブログやってる方（特にブクマを多くされる方）や、 記事等を書くライターさんならわかると思うのですが、 アウトプットしていくと、痛烈批判が起きる時があります。 Webは情報発信の手軽さ反面、一瞬で誰でも世界中の人が見れる諸刃の剣です。 世界には自分が理解できない人は大勢いますし、レベルの高い方々も多いです。 ブログは手軽に発信できます。
国内Webサイト参考デザイン一覧集 | Maka-veli.com
ん？タイトルの日本語、なんかおかしい？(笑) 自分用に、国内のWEBサイトサンプル集をメモ。 やっぱ国内のが参考にしやすいですよね。 ズロック http://www.zzrock.net/ 一番お世話になってます。 検索も楽です。 そしてサイト自体のデザインも好きです。 (黒×黒のロゴとかやっちゃうとこがまた良い) iKeSai.com http://www.ikesai.com/ なんか気楽に見れる。見やすい。 WEBdeDB http://www.webdedb.com/ 更新減ってきたけど、数多い。 (Faviconつけてほしいー…) WEBデザインの見本帳 http://www.web-mihon.com/ 印象から検索できるのは嬉しい。 サイトがかわいい。 webselection http://web-selection.com/ シンプル。み
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
