![Unformed Building](https://cdn-ak-scissors.b.st-hatena.com/image/square/a51bb369b492e4b453f08ca6dfedb466d0e54672/height=288;version=1;width=512/https%3A%2F%2Funformedbuilding.com%2Fassets%2Fimages%2Fog.png)
一般的に、ブログを書く理由は主に以下のような点ではないでしょうか? アフィリエイト 技術的な備忘録(勉強) 話しを聞いて欲しい。 自己紹介 作品展示 日記 たくさんのアクセスが欲しい。 他のサイトへの誘導 ブランディング(なんかの) ディスカッション 僕がブログを立ち上げた理由は 技術的な備忘録(勉強) が当てはまります。 自分がブログでこだわりたい点 ブログを書いていく上で、色々目的やコダワリが変わっていきました。 初期: 最初はアクセスとか全く気にせず、WPいじるのが好きだっただけ。記事はカオス。 BlackBerryとか好き過ぎて書いてた(今書いて無い・・・) http://maka-veli.com/category/blackberry 中期: 身近な人からの反響が嬉しくて、デザインや機能をこだわりだしました。 記事は時事ネタとか。 http://maka-
世にスマートフォンアプリが溢れ、入力デバイスがマウス、キーボードから指先に変わった今、UI/UX はどのように変化していくのか? 雑誌Web Designingでは、アプリ制作の技術者から学ぶ当連載や、中村洋基氏をはじめとするクリエイターが登壇するセミナー、中国・上海のWeb制作会社訪問ツアーなどの豪華賞品が当たるアプリアワードを行う「 TapApp(タップ*アップ)プロジェクト」をスタートする。連載第一回では、サイバーエージェントのゲームUIデザイナー櫻井瑶子が登場する。 スマホアプリ制作の最前線でUIデザイナーに求められるもの Web制作の延長で、スマートフォン向けサイトやWebアプリ、あるいはネイティブアプリの制作にかかわる機会が増えている。昨今では、Webキャンペーンにおいて、スマートフォンからのアクセスを考えないことのほうが珍しい。 言うまでもなくスマートフォンとPCではデバイス
ウェブデザインの基本はおさえつつ、フレッシュでクリエイティブものを取り入れたい! そんなデザイナーに役立つテクニックを紹介します。 Fresh and Creative Web Design Techniques 下記は各ポイントを意訳したものです。 はじめに ホワイト/ネガティブスペースをもっと ピーチとサーモン より大きいのがベター イメージを動かす ストックフォトは使わない はじめに デザイナーとして、このことは新年を迎え最も興味深いものの一つです。そうです、2013年のデザイントレンドは何が大きくなるのかです。これは非常に大切なことです。 そのトレンドの後に次が何であるか、ウェブデザイナーは新しいトレンドが何であるか適切に把握しておかなければなりません。 トレンドは本当にデザインを面白くします。 もちろんレスポンシブは今年のトレンドでしょう、昨年もトレンドでした。そして、私たちはグ
近年、Webおよびアプリケーションの制作においてUI/UXという言葉が広く意識されるようになってきましたが、具体的にどのように取り組めばよいのでしょうか。本稿では、実際に運用しているスマートフォン向けソーシャルゲームを題材に、ユーザーにとって本当に「使いやすい」UI/UXデザインを行うポイントをいくつか紹介します。 はじめに 近年、Webおよびアプリケーションの制作においてUI(ユーザー・インターフェース)・UX(ユーザー・エクスペリエンス)という言葉をデザイナーだけではなく、企画者やエンジニアも使用し、意識するようになりました。中でもPCよりも画面サイズや通信スピードが劣るスマートフォンでは、UI/UXの必要性は高まり続けています。 ではスマートフォン向けソーシャルゲームにおける良いUI/UXとはどのようなものでしょうか。ボタンサイズや位置、タップ領域の大きさ、画像容量など、スムーズに操
Webサイトの待ち時間の80%はフロントエンドの処理によるもの なんて言われるとドキっとしちゃいます。どんな素敵にデザインして綺麗にコーディングしても、ページが重くてイライラしてるユーザーがいたら台無しです。なのでスマホ向けサイトのデザインに入る段階から、高速化・軽量化を意識するために、いくつか項目をメモしておきます。 デザインの段階から軽量化を意識する 画像を極力使わないで魅せる努力をする 当たり前ですが、画像を使えば使うだけレスポンスは遅くなります。背景画像にドデーンと写真を使ったり、見出しを使うたびに大きなアイコンを入れるなど、わざわざページを重くさせるようなデザインにする必要はありません。 多少シンプルになったとしても、色のメリハリ・1pxの線などでカバーしましょう。テキストも可能な限り画像にせず、デフォルト文字にするべきです。Webデザイナーの腕の見せ所ですね。 HTML5+C
NEW LUMINE SPRING 春のルミネ新宿。新店続々オープン。ルミネ2・1Fに話題のショップが続々オープン!人気のショップもリニューアルして、ますます魅力的なフロアへと変化します。どうぞご期待ください!「眠れる森の美女」をテーマにポスターを制作。ルミネ新宿の"春のめざめ"を表現しました。 (画像をクリックすると拡大します) 雅号木下秀翠(しゅうすい)。日本古来の伝統芸術である書道を探求。読売書法会幹事、謙慎書道会理事。『読売書法展 特選』『謙慎書道会 推薦顧問賞』他、数々の賞を受賞。『国際女性筆墨展』では日本代表に。近年は、世界各地で開催されている国際ブックフェアや国際交流基金の要請により、"日本の書"を普及させるためのワークショップ『日本の美しい文字プロジェクト』も展開中。 公式サイト 1999年ABE氏に師事。2003年渡米。2005年N.Y.でYannick d'Is氏のファ
こんにちは。意匠部ME課のtacamyです。 CSS Nite 4周年記念イベント(Vol.40 reprise)にてご紹介した iPhone Webアプリのテンプレートセットを配布します。 イベントの内容はこちらのエントリーをご覧ください。 ダウンロード iphone-tmpl.zip セット内容 index.html HTML5+iPhone用HTML css/iphone.css HTMLの新要素+iPhone専用CSS js/iphone.js URL&検索バーを消す指定 js/lib/jquery.js jquery apple-touch-icon.png Webクリップアイコン cache.manifest マニフェストファイル .htaccess < dd style="margin-bottom:0.5em;">.manifestのMIMEタイプ設定 viewportにつ
CSS についても、PC サイトとは異なる箇所がある。スマートフォンは縦向きと横向きで横幅が変わり、デバイスの種類によっても違うため、コンテンツの幅は100% のリキッドレイアウトで作るのが一般的だ。HTML5 の新しい要素に対してもCSSのリセットを行うために、今回はhtml5doctor のCSS(http://www.html5.jp/html5doctor/html-5-resetstylesheet.html)を利用した。また、モバイル版WebKit独自のプロパティもいくつか用意されている【2-1】。 【2-1】-webkit-text-size-adjustをnoneとすれば、デバイスの向きを変えたときも文字サイズを拡大しないように指定できる。-webkit-tap-highlight-colorでは、リンク要素をタップしたときの色を指定できる。指で操作していると自分がどこをタ
マークアップの方針を決める スマートフォンはPCに比べて通信速度の遅い3G回線で利用されることが多いので、画像を多用するとページが表示されるまでに時間がかかります。必要のない画像の使用は控え、ダウンロードするコンテンツの容量を抑えましょう。今回は、ヘッダー部分とフッター部分だけを画像として切り出し、それ以外のタイトル文字やボタンなどはCSS3を使って装飾します。 基本的な要素をマークアップする まずは、基本的な要素をマークアップしていきます。Photoshopでヘッダーとフッターの画像を切り出して保存します。ここでは、写真を多用しているヘッダー部分をJPEG形式で、フッター部分はPNG形式で保存しました。 サイト名はh1要素、小見出しはh2要素といった具合にマークアップを施していきます。実際のHTMLは以下のようになりました。 <!DOCTYPE HTML> <html lang="ja"
iphoneに表示最適化したサイトもかなりたくさん出てきていますが、iphone対応サイトの作り方を備忘録的にまとめたかったので途中までまとめてみた。もっと書きたい事あるけど、続きは追記しておこうかな。 iphone最適化とはヤフー検索が対応した事例でもある通り、すぐに情報を見つけられるように、よりページを軽く、そして操作性の良い、iphoneに特化した見せ方をする事を言います。iphoneは通常PCでの見え方をそのまま表示し、タップしたりピンチオープンして拡大させたりしながら使用しますが、PC表示だといらない情報が多く、特に検索だと、パッと探してパッと表示できるものであって欲しいですよね。使う人の利便性を考えた設計から成り立ってます。 と言うことで今回は、iphoneサイト制作の基本をまとめてみた。 基本 iphoneのブラウザはMobile Safari ブラウザ: Safari2.
Introduction In the ever-evolving landscape of web browsing, staying abreast of the latest technologies is crucial. HTML5, the fifth and current version of the Hypertext Markup Language, has revolutionized the way we experience the web. With its advanced features and enhanced capabilities, HTML5 has become the cornerstone of modern web development, offering a more seamless and interactive user exp
Matt Webb さまざまな異なる種類のサークルを重ねたエレメントです。異なるカラーを使いダイナミックに見せたり、単一のカラーでモノクロームを演出することができます。また、より少ない数のレイヤーにすることで、よりシンプルに見せることもできます。配置としては、背景やヘッダなどがよいでしょう。 半透明のサークル Pngised 半透明のサークルは最近、多くのウェブサイトで見かけます。使い方としてはカラフルなサークルか、いくつかのカラーだけにしたサークルが多く、主に背景として利用されています。他にもページ内の適切な箇所のみをハイライトする役割もあり、ユーザーの注意を惹きつける有益な方法です。 かなり大きなサークル
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く