タグ

ブックマーク / blog.fenrir-inc.com (8)

  • 【iPhone / iPad 開発】新しい iPad の Retina ディスプレイ対応にする方法と落とし穴(+期間限定セールのお知らせ)

    こんにちは。開発担当の金内です。 みなさん、新しい iPad をもう触ってみましたか?話題は何といっても Retina ディスプレイ。4倍のピクセル数になって、まるで印刷物のような美しさです。 Sleipnir Mobile for iPhone / iPadiPad の Retina ディスプレイ対応版を App Store に申請しています。どうやらいつもより審査に時間がかかっているようなのですが、もう少々お待ちください。 今回は iPhone / iPad 両対応のユニバーサルアプリを Retina ディスプレイに対応させるにあたってのポイントと、下手をするとハマってしまう落とし穴を紹介します。さらに、iPhone / iPad アプリの期間限定セールのお知らせもあるので最後までお読みください。 ファイル命名規則UIImage への読み込み “image.png” というイ

    【iPhone / iPad 開発】新しい iPad の Retina ディスプレイ対応にする方法と落とし穴(+期間限定セールのお知らせ)
  • リッチに見せるデザインテクニック。Appleのデザインのように美しい金属調の質感を表現する方法。 (フェンリル | デベロッパーズブログ)

    こんにちは、イメージ担当の長谷川です。 今回は Apple がデザインしている iCloud アイコンのような美しい金属調の質感を Fireworks で表現してみました。 アレンジ次第で水平のエッチングやブラスト加工のようなイメージも簡単に作ることができます。 ぜひ Web や UI デザインの参考にしていただければと思います。 1. ベースのテクスチャを設定する まずグラデーションの設定をします。 長方形ツールで作成するボタンなどのサイズより少し大きいサイズの四角を描き、グラデーションの塗りを円錐にします。 以下のように白とグレーを交互に設定します。右端と左端を同じ色にしないとグラデーションに線が出来てしまいますのでご注意ください。 ここでは濃いグレーを #666666、両端の薄いグレーを #999999 に設定しています。 次にノイズを適用量:10で追加します。これが同心円状のヘアラ

    リッチに見せるデザインテクニック。Appleのデザインのように美しい金属調の質感を表現する方法。 (フェンリル | デベロッパーズブログ)
  • 【スマホ用ページ】低解像度、高解像度端末のどちらでもくっきり綺麗に表示しつつ、幅ぴったりにする HTML テンプレート。

    こんにちは、ウェブ開発の林です。 スマートフォン向けウェブページを作る際、横幅ぴったりにしたいと思いませんか。 meta viewport というタグを使えば表示サイズを調整することができます。 ただそれを使ったとしても、Android / iPhone は端末により横幅が違うため個別に最適化するのは面倒です。 スマホ端末ごとにコードを分けることなく常に幅ぴったりにする HTML テンプレートを作りました。 こちらを参考に組んでみてはいかがでしょうか。 HTML テンプレートコード(ヒント付き) こちらの HTML コードを丸っとコピペして修正していくと楽だと思います。 追記: ライセンスフリーです。自由に使ってください。 <!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title></title> <!--

    【スマホ用ページ】低解像度、高解像度端末のどちらでもくっきり綺麗に表示しつつ、幅ぴったりにする HTML テンプレート。
  • 高品質な UI や Web のデザインが短時間で作れるおススメの Fireworks 拡張機能 4つ

    こんにちは、イメージ担当の長谷川です。 「品質を上げれば速度が落ちるし、速度を上げれば品質が…」 デザイナーにとってはこの品質と速度が非常に悩ましいですよね。 今回は UI や Web デザインのモックアップなどを、品質を保ったままサクっとデザインするときに役立つ Fireworks の拡張機能をご紹介します。 1. 作ったデザインを崩さずにまとめて縮小できる「Smart Resize」 Web ページのデザインデータを使ってスマートフォン用など異なったサイズのデザインを作りたいときなどに最適です。 【使い方】 インストールするとコマンドに「Smart Resize」が追加されます。 サイズ調整をしたいデザインを選択して コマンド> Smart Resize > Attach を選択します。 後は黄色のコントロールポイントでサイズを調整するだけでテキストの改行などデザインを保ったまま自動的

    高品質な UI や Web のデザインが短時間で作れるおススメの Fireworks 拡張機能 4つ
  • Sleipnir Mobile for iPhone / iPad のジェスチャをマスターしよう

    こんにちは。Sleipnir Mobile for iPhone / iPad 開発担当の宮です。Sleipnir Mobile には、TouchPaging こと一指でできるジェスチャ操作がたくさんあります。最近、うまくジェスチャを発動させられないといった声を見かけたので、今回はジェスチャを発動させるコツを紹介しようと思います。やり方さえわかれば、ほとんどミスすることなくジェスチャ操作できるようになるので、ぜひ読んでマスターしてください。 “L 字”を描いてタブ削除 これは簡単ですね。下、右です。ひとつコツをあげるとしたら、下と右の間の角を意識して描くことです。 “L 字 ×2″を描いてグループのタブを全て削除 下、右、下、右です。上の L 字と全く同じ線を2回連続で描けば OK。これはかなり便利なので、よく使いますね。Hold And Go で一気に開いて、全部読みおわったらすぐ

    Sleipnir Mobile for iPhone / iPad のジェスチャをマスターしよう
  • ビジネス英語メールをブラッシュUPする5つの方法 (フェンリル | デベロッパーズブログ)

    こんにちは、プロモーション担当のクーパーです。 いつもフェンリルのプロダクトをご愛用いただきありがとうございます。実は、フェンリルのプロダクトは海外でもご好評いただいています。先日のリリースでも、複数の海外メディアに取り上げていただきました。なんですか?意外にグローバルって? そんなこんなで、海外とのやり取りも発生します。今回は、英語でメールを作成した時に、ちょこっとブラッシュアップする5つのコツをご紹介します。とっても自己流なので、つっこみどころ満載かもしれません。 ご容赦下さい。 1. 相手先の担当者名が分からない時 一番無難なのは、To whom it may concern, (ご担当者様)です。 その他、覚えやすくて簡単なのは、Dear Sir/Madam, 。 外国人名で調べても性別が分からない場合には、 「Dear+(相手の名前:できればフルネームの方が丁寧),」でも十分です

    ビジネス英語メールをブラッシュUPする5つの方法 (フェンリル | デベロッパーズブログ)
  • ずっと使えるデザインテクニック。すっきり美しく見せる『余白』と『文字』の使い方。

    こんにちは、デザイナーの長谷川です。 今回は僕が普段気をつけている、ちょっと意識するだけでスッキリしたデザインになるレイアウトのコツをご紹介します。 デザイナーじゃない方も、企画書や簡単な UI のモックアップ、Web や雑誌のレイアウトなどに応用できると思いますので、ぜひ参考にしていただければと思います。 1. 上下左右のマージンを均一に Web デザインや UI デザインの要素全てに対して隣り合う要素との間隔やバナー、ボタンなどの外側と内側の要素の上下左右マージンをできるだけ均一にすることで、デザインがスッキリ見えます。 2. 内側のマージンは外側のマージンより狭く レイアウトなど一番外側とコンテンツの間隔より文章のかたまりや画像同士の間隔を小さくします。基的にコンテンツのまとまりを作るためですので、デザインによっては広く取って区分ける場合もあります。 3. 段落の下は間隔を広く開け

    ずっと使えるデザインテクニック。すっきり美しく見せる『余白』と『文字』の使い方。
  • 【保存版】これを見たら、あなたの財布は確実に緩むであろう素敵すぎるネットショップ 101選

    こんにちわ。坪内です。 突然ですが、この2年ほどで集めた素敵なネットショップを一挙公開しちゃいます。はっきり言って、この記事書いてるだけで、何度もポチリかけたくらい、素敵なアイテムがてんこ盛りです。既に知っているショップも多いと思いますが、知らないショップがあったら是非チェックしてみてください。 ちなみに、数が多すぎて説明文書くのは断念しました。カテゴリ毎には分かれているので、実際にご自身の目で確認してみることをオススメします。

    【保存版】これを見たら、あなたの財布は確実に緩むであろう素敵すぎるネットショップ 101選
  • 1