サクサク読めて、アプリ限定の機能も多数!
トップへ戻る
大谷翔平
lab.sonicmoov.com
こんにちは、イタヤです!イラスト描いてます。 髪の毛を描くのは苦手で…そう思っているあなたに今回は髪の毛の描き方をご紹介します。 目次 おおまかな光と影を描く ふんわりとした光を描く 髪の束の影を描く ハイライトを入れる 描き込み 完成 1.おおまかな光と影を描く 画像のように頭は球体だと考えるようにするとどこに光と影が入るかわかりやすいです。 今回、光源は太陽のマークがある左上です。この時点では本当にざっくり描きます。ハイライトが入るガイドだと思ってください。 画像の左のようにおおまかな光と影を描いたら、右のようにその境目をぼかします。 この時、耳に掛けた髪や、背中側に回り込む髪といった、奥まった部分はぼかしません。 赤枠部分のように滑らかに繋がった部分のみぼかします。 2.ふんわりとした光を描く 光源をわかりやすくするために、最初に想定した光源側にボケ足の強いブラシでさっきより少し強め
こんにちは!来世こそは人以外の生き物になりたいおおにしです。 今回は「簡単に」「それっぽく」描ける『瞳(目)の描き方』をご紹介しようと思います! キラキラうるうるした瞳を描きたい時に意識している事を自分なりにまとめてみました。 あくまでそれっぽく見せると言うまとめですので、あまり突き詰めず手早くリアリティを出したい時の参考にして頂ければ幸いです(「・ω・)「 STEP①目の形を描く 今回は身近な動物である【猫】の瞳を描いていこうと思います。 一度理解すればいろいろな瞳に応用できるので順に見て行きましょう。 ①大まかな目の形を描く ②影を置く (眼球は奥行があり丸いのでアーチを描くように置きます) ③瞳孔を描く (今回は縦長の楕円ですが、犬や鳥の場合は正円、羊や馬だと横長の楕円になります。お好みの形でどうぞ!) ④もう一段暗い影を付ける (先程付けた影は眼球の奥行を。こちらはまぶたから落ちる
はじめに レスポンシブの js 対応… いつもカオスになりますよね…? PC版はこんな動きで~、SP版ではこういう動きにしてください♪ なんていうのは厳禁です。 わたくしたちコーダーから冷たい視線を浴びることになるので注意が必要です。 レスポンシブなんて無かった時代が懐かしい… ゜(ノД`)゜。 今回はカオスにならない方法で ドロップダウンメニュー を実装する方法をご紹介します。 至ってシンプルです… サブメニューのアコーディオン? …大丈夫、別の機能は切り離して考えましょう。 目次 サンプル HTML CSS jQuery サンプル まずはサンプルをご覧くださいませ。 デモ HTML 基本的なタグ構造はこちら! [sourcecode lang="html"] <header class="l_header"> <div class="l_header_row1"> <div class
昨今IoTが騒がれはじめて久しいですが、IoTといえばマイコンっすよね、てことでIntel Edisonで何か作るシリーズ。 とえりあえず最初は、初期化してSSHでログイン出来るところまで。 準備 Amazonで下記を購入。 開けて、Edison本体とBreakout Boardをつなぎます。 上記の赤丸のところにMacからマイクロUSBを繋ぐと起動します。 macにdiskとして認識されれば、とりあえず起動完了です。 初期化 早速初期化します。 下記より設定ツールをDLしてきます。 https://software.intel.com/iot/hardware/edison/downloads 起動します。 Nextを押して進んでいくと次のような画面に。 上から順にファームウエアの更新、SSHのパスワード設定、Wi-Fiの接続です。 最後にFinishを押して完了。めっちゃ簡単です。 ※
Photoshopの切り抜きをやる方法として「選択とマスク」機能を使ったやり方がありますが、それの紹介です。 関連:Photoshopで使える!写真の背景を自動で切り抜く「Remove.bg」の使い方 目次 「選択とマスク」機能とは? 各種機能説明 ツール ツールオプション 属性 「選択とマスク」機能とは? photoshopCCのアップデート、 photoshopCC 2015.5が6月22日にきました! 今回はそのアップデート情報の中で、業務上で実践的な「選択とマスク」のワークスペース機能ついてご紹介したいと思います。 選択とマスクのワークスペース機能とはいままであった「境界線を調整」がダイアログで表示されていたものが専用にワークスペースとしてまとめられさらに使いやすくなったものです。 各種機能説明 ワークスペースはマスクしたい写真を選択した状態で、 「選択範囲」の「選択とマスク(Al
弊社デザイナーにもついにMacが導入されました。 念願叶って私めにiMacが届きました。これからMac生活のスタートです。 さて僕がMacをどうしても悲願した理由の1つとして、AdobeのUX、UIデザインツールである「Adobe XD (Experience Design)」の存在があります。 Windows版はリリースされておらず、今年リリースと言われていますが、未だ音沙汰ない状態です… しかし、Macが届いた今、そんなことも気にせずXDを使えることとなりました。 今回は勉強がてら書いてみようかと思います。 Adobe XDとは… そもそもXDとはなのですが、簡単に言うと、Webサイトやスマホアプリの作成に特化したAdobe社が提供しているデザインツールです。 今まではAdobeのソフトでWeb、アプリ制作においてはPhotoshopがありました、ですがPhotoshopはもともとは写
以前iOSでSDKの開発・公開をしたことがあるのですが、あまり手順がまとまったサイトが多くない点やiOS7など以前のOSもサポートする際に注意点がいくつかあるので整理してみました。 目次 選択できるライブラリの種類 Embedded Frameworkについて Universal Framework Bitcode App Storeへ申請する際の注意点 まとめ 選択できるライブラリの種類 まずiOSで選択できるライブラリの種類は下記の通りです。 Xcode 5まではiOSではCocoa Touch Static Libraryのみ Xcode 6からCocoa Touch Frameworkを選択することでFrameworkを簡単に作成できる Static Libraryは以下の特徴を持っています。 アプリケーションのコンパイル時に組み込まれる形で(静的に)リンクされるライブラリ コンパ
「VRの現状とコンテンツの作り方シリーズ」 前回は制作サイドから見たVRゴーグル比較について書きましたが、二回目は360度動画の現状について書きます。 360度動画って? 見ていただいたほうが早そうですのでひとまずこちらを。 スマホの方はYoutubeアプリ等で見ていただくのが良いです。 特徴としては下記のような感じになりますね。 PCブラウザとかだとマウスでグリグリ動かして360度見ることができます スマホだとスマホ自体の向きと同期して360度見ることができます スマホでVRゴーグルボタンを押すとVRモードになるので、ハコスコとかで見ることができます youtubeはライブストリーミングや3Dサウンドにも対応しているようですね。 3DサウンドはAndroidでヘッドフォンを着ける必要があるようです。 最近だとFacebookも360度動画投稿・閲覧ができたりしますね。 こんな感じのようで
こんにちは!文字が大好きなアリイエです。 今回は『ロゴの作り方・考え方』について簡単にまとめていきたいと思います。 ロゴの作り方は人それぞれですが、大きく分けて3つのポイントをご紹介いたします。 ロゴデザインするなら、色も抑えておきたいところです。こちらもチェックしてみてください。 【Webデザイン入門 1】初心者は抑えておきたい色の基本 目次 いろいろな文字の形を知る 先進感 高級感 かわいい 堅実さ エレガント ナチュラル 現代的 質の高いロゴを見る コンセプトをしっかりと考える。そして、遊ぶ 文字をカットする 文字をつなぐ シンボルを入れる オリジナルの文字を使う エレメントに手を加える ポイント1) いろいろな文字の形を知る 文字をアレンジする前に、まずは文字が持つ『表情』を把握しておきたいと思います。 1. 先進感 ゴシックや明朝に平体や斜体をかけたフォント定規とコンパスで描いた
はじめまして、美大あがりの新卒エンジニア、ヨコちゃんです。 まだまだぺーぺーのひよっこですがよろしくお願いします。 botでできること比較 さて、近頃人工知能ブームの影響かbotがアツいです。 過去に弊社でもMessengerプラットフォーム実装の記事をあげていますが、先日messengerプラットフォームがアップデートされましたので改めてLINE bot APIと比較してできることを紹介しようと思います。 送信できるメッセージフォーマット まずは送信できるメッセージフォーマットの比較。 どちらもテキスト以外の様々な形式をサポートしています。 公開後すぐのMessengerプラットフォームでは音声や動画の送信はできなかったのですがアップデートを経て使用できるようになりました! そのほかLINEでは位置情報やスタンプなんかも送ることができます。 使えるリッチメッセージ そしておそらく通常テキ
サイトリニューアルの際、SEOにも気を付けて行っていますか? こんにちは。今回はリニューアルに関するSEOのお話です。 秋や年末に向けて、リニューアルの準備が始まっている会社さまも多いのではないでしょうか? キーワードやコンテンツなど、SEOを意識しながらの制作はあるけれど、公開直前、公開後にもSEOでやらなければならないことがあるんです。 スムーズにクローラーにインデックスさせ、順位のスタートダッシュをはかるためにも、このお作法を覚えていただけたら嬉しいです。 リニューアルの際に気を付けたいこと 過去ページのURLの洗い出しとリダイレクト先を決める リニューアルって、新規ページの追加や過去のページの削除など、さまざまありますよね。 「今回のリニューアルではこんなサイトマップで、こんなURLにする!」と決まっていても、過去のURLは意外と見落としがちです。 そこで、過去のページのURLリス
こんにちは、ソリューション事業部でデザイナーをしております、こーたと申します。 ゲームを楽しむために、快適で使いやすく、ユーザーにストレスを感じさせないUIデザインが大切であるということを、前回の【UIデザインで幸せになるためにUXで意識している事】で掲載しました。 ではユーザーが幸せになる良いUIデザインをするためには、具体的にどうすればいいのかということですが、それらに基づいた骨組みをしっかりと作ってあげる必要があります。 今回はそんな幸せになるためのUI設計の作り方をご紹介します。 1:共有と理解 まずは設計する前に作るものへの理解を深めましょう! UIの設計は、ゲームを企画をした人と密に連携をとって、きちんと内容を理解する事が非常に大切です。 たとえば・・・ どんなゲームなのか 何をするゲームなのか どんな世界観であるのか このゲームのウリ、特徴はなにか このゲームのターゲット層は
App Storeでのアプリ審査が9日間ぐらいから24時間以内に短縮されましたね! キタ━━━(゚∀゚).━━━!!! (実際は3日ぐらいだったが…) あ、ども。ソニック最後の使者ディレクターのチャンプです。 ただ、それに伴いAppleの審査が更に厳しくなってきたので再度リジェクト理由まとめたお( ´∀`) みんなガンガンアプリ作ろうぜっo(゚∀゚o) 相変わらず厳しいアプリ審査 はい!再度言いますが審査時間が短縮されたからといってApple様のアプリ審査はそう簡単に通過しません。 本当しっかり見てますからね! なので、再度コピペしてもわかるようにまとめたので、皆さまのアプリ開発に貢献できれば幸いです。 ※以前の記事から新しくなっているところはNewマークがついてます! AppStoreリジェクト(reject)レビューガイドライン 1. 利用規約について – Terms and cond
こんにちわ。ソニックムーブでディレクターをしているねこです。 今回は「すぐに実践できる!iOSアプリのASO対策」についてまとめてみました。 ASO対策の方法や効果測定に関する記事は露出が少なく分かりにくいものではないですか?私も同様の課題を抱えていたのですが、「これではいかん!」と思い試行錯誤してみました。 今回は実案件で実施した内容を以下の項目でまとめてみましたので、お時間のある時にご覧いただき「いいね」してもらえると最高です。 ■モデルアプリ 無料謎解きゲーム|ねこ神様はクイズ好き!? ■ゲームモデル 無課金クイズゲーム では、本編スタートです。 目次 ASOとは? 目的と競合調査 検索候補の確認 施策実施 効果測定 ASOとは? フルスペル:App Store Optimization 読み方:エーエスオー 別名:App Store最適化,App Storeオプティマイゼーション,
こんにちはー!コンテンツグループのみさこです。 突然ですが、ソニックムーブでは有名人の似顔絵LINEスタンプをちょこちょこ出しています。 ソニックムーブ制作LINEスタンプ 宣伝はこのくらいにして… 今回は上の画像ような、デフォルメした似顔絵を描くコツについて書いてみたいと思います! 似顔絵になるのはこちらのお二人! ソニックムーブ代表取締役の大塚と、取締役の関口です。 目次 Step1.パーツの特徴をあげる Step2.配置バランスの特徴をあげる Step3.特徴を意識してデフォルメする Step4.確認してもらう Step5.その人らしさを足してみる まとめ Step1.パーツの特徴をあげる まずは、似顔絵にする人の顔パーツの特徴を探っていきます。 人間の平均顔は上の画像のような比率だと言われています。 平均顔(特徴が無い顔)と比べ、違うところをピックアップすれば特徴が見えてきます!
はじめに 2016/05/16に「第一回 社内エンジニア勉強会」が開催されました ヾ(。・∀・)ノ システム、フロント、マークアップエンジニアが一同に揃って執り行う盛大な勉強会! そんな勉強会で、アクセシビリティについてお話する機会をいただくことができました!! 5分の LT … 案外短いもので、時間足らずだったのでとても悔しい(´ω`*)… 口頭でだーーーーっとお話したものも含めて、こちらにまとめたいと思います。 目次 アクセシビリティとは? 障害者差別解消法 標準規格 対応してみる 書籍紹介 参考サイト アクセシビリティとは? アクセシビリティとは、使いやすさ、アクセスのしやすさ、利用しやすさのことです。 参考: アクセシビリティ – Wikipedia https://ja.wikipedia.org/wiki/アクセシビリティ Web におけるアクセシビリティは、高齢者や障害者、さ
前回はPhotoshopで簡単にテキストをスタンプ風に加工する方法をご紹介しました。 甘いものがおいしい季節になってきましたので、今回はPhotoshopを使い、パンケーキにハチミツで絵を描いてみたいと思います! 1.素材を用意 パンケーキの画像の上に、元となる素材(イラストやテキスト)を配置します 2.素材のレイヤーを複製 素材(イラスト)のレイヤーを2つに複製し、それぞれ塗りを0%にします 3.上のレイヤーにレイヤースタイルを適用 複製した上のレイヤーに、以下のようにレイヤースタイルを適用します ◆べベルとエンボス … 照り返しの部分になります ◆シャドウ(内側) … 立体感が増します ◆パターンオーバーレイ … ハチミツのべたっとした質感を出します ※今回使用したのは [パターン] の [サテン] です ◆ドロップシャドウ … ハチミツの陰になります これらを適用した結果、このように
こんにちは!あんみです。 前回の【Photoshopテクスチャ】切り絵風イラストを制作してみよう!その1ではこのようなテクスチャを制作しました。 今回は前回のテクスチャを使用してこちらの切り絵を制作してみましょう! 切り絵を制作 ブラシツールで下絵を描きます。 1.「レイヤー3」に魚の顔の部分を投げ縄ツールでざっくり選択、塗りつぶし 2.「レイヤー4」にテクスチャ③を貼り付け。右クリック「クリッピングマスクを作成」 3.「レイヤー3」「レイヤー4」をグループ化 顔の部分ができます。 1.上記と同様にうろこを制作。テクスチャ①を使用 2.グループ化したレイヤー「うろこ」のレイヤーの描画モードを「乗算」 すると紙が重なったような影ができます。他も同様にテクスチャ①~⑤を使って全てこの方法で制作していきます。 テクスチャを張り付ける際には画像すべて全体を張り付けるのではなく一部分を張り付けた方が
初めましての方は初めまして。バックエンドエンジニアのmackyです! 最近はモンハンクロスをやっています。好きな武器はグラン=ダオラです。 今回はVPCを作成していきましょう。 VPCとは何か Amazon Virtual Private Cloud(Amazon VPC)の略で、仮想的にプライベートな空間を作成して、その中でAWSのいろんなサービスを起動しているように振舞わせるものです。 なぜ必要なのか 通常、サーバを構築する際には、このサーバとこのサーバが繋がっていて、このサーバはここからしかアクセスできないといったようなネットワーク構成を考える必要がありますが、AWSではネットワーク構成を考えなくてもサーバを立ち上げることができます。 しかし、それだとセキュリティ面などに不安が残ります。例えば、あるDBサーバがあったとして、VPCを設定しなければ、どこからでもアクセスすることができて
どうもまりぞーです。 jQueryへ入門したい初心者さん向けに、簡単な使い方やデモなどをご紹介します。 第1回目となる今回は、まずはjQuery本体をダウンロードして、HTMLで読み込み、実際に動作するか試してみます。 簡単なデモもあります。 目次 jQueryとは ダウンロード 読み込み 書き方 まとめ jQuery入門ガイド jQueryとは Javascript をお手軽に扱えるようになるライブラリです。 詳しく知りたい方は公式のjQuery Learning Center (英語)を参考にしてください。 ダウンロード jQueryをダウンロードしてきます。 jQuery 画面右側の「Download jQuery」ボタンをクリックします。 jQueryには現在2種類あります。お好みの方を選び、リンク先のファイルを保存します。 jQuery 1.x 初期のjQuery。結構古いブラウ
こんにちは。イラストを描いています、あんみです。 絵本などでも見かける切り絵の作風が好きなのですが、いざ制作しようとすると準備や作業が大変ですよね。 そこでPhotoshopで切り絵風イラストを制作してみました。 今回はこのようなイラストをPhotoshopで簡単に制作する方法をご紹介します! テクスチャを作る 素材を用意 切り絵に使うテクスチャを制作します。 まずこちらのような素材を用意します。 ①は水彩絵を紙に塗ったもの。②はアクリル絵の具で塗ったものです。 レイヤーを使って素材を作成 長方形選択ツールで①の素材の好きな部分を選択 新規→角度をつけて貼り付け レイヤーの描画モードを「乗算」、不透明度「80%」に設定 この繰り返しです。不透明度を変えてみると濃淡がランダムに出ます。 素材のグループ化 素材を張り付けた全てのレイヤーをグループ化 グループを複製し、「グループ1コピー」に角度
こんにちは。デザイナーのユウコです。 今回は、スマートフォンアプリのUIデザインの時に参考になるギャラリーサイトを集めてみました。 関連:様々なインタラクションを確認できるアプリギャラリーサイトUI Sources 目次 世界のクリエイター作品が集うギャラリーサイト Behance dribbble Pintarest UIデザインのパターン集 pttrns lovoly ui MOBILE PATTERNS アプリアイコンとスクリーンショット集 iconDrop iconsfeed App Screenshot 世界のクリエイター作品が集うギャラリーサイト まずは、世界中のクリエイターの優れたデザインが楽しめるサイトから3つをご紹介します。 これらはアプリ専門のサイト集ではありませんが、タグなどで絞り込むことで、アイデアにあふれるアプリの画面デザインをたくさん見ることができます。 Beh
お久しぶりです。去年入社致しました、ウエムラです。 1月に開催された、世界で開かれているグローバルゲームジャムに参加してきました。 初めての参加なのでびくびくしてましたが、とても楽しかったです! できた作品:ゲームジャム作品 (私の担当した部分は[結果画面]で、あまり役に立っていませんが…) さて、今回はゲームに使える数学についてです。 ゲームを作る上で数学は避けては通れぬ道… 私は数学が全然得意ではありませんが、そんな私も調べながらであれば少しは出来るので、記事にしてみようと思いました! 最近、本格的にUnityを始めたので、Unityで書いていこうと思います 素材はこちらを使っていきます。(見た目を変えるだけなので、なくてもOKです!) アセット素材 どんな用途に使うか?(参考) ・敵の移動 ・敵の攻撃 ・カーソルのエフェクト 追尾は色々なゲームで使いますが、主に上記であげた内容で使う
また会いましたな! 鳥さんのおしりとコアラのマーチをこよなく愛するまりぞーです(°ω°)ノ 今回は、こりゃ便利!なjQueryプラグインを紹介していきます。 一応ライセンスも併記してます。 だいたいこんな感じに動くよ!みたいな簡単なデモを用意してたりしてなかったりしますので、よろしければそちらもご確認ください。 よろしくお願いしやす。 SVGでアニメーションできるDrawSVG [jQuery DrawSVG] – [MIT] [Github] jQuery DrawSVGは、SVGで描かれたパスにアニメーションを付与できるプラグインです。 簡単にちょちょいと実装できます。 SVGうんぬんに関しては、こちらの記事が参考になります。 SVGとは?使う前に知っておきたいことまとめ | SONICMOOV LAB – [MIT] 滑らかで美しい表現ができる!SVGアニメーションを使ってみよう |
UIは、User InterfaceのことでInterfaceには、ざっくりと下記のような意味があります。 (二者間の)境界面、接点 インターフェース(人間とコンピューターとの接点) このことからも分かるように、UIは人間とコンピューターの間のやり取りを持つ境界面で、操作の入力や操作結果を表示するための出力手段であると言えます。 ざっくりと言えば操作パネル、と捉えておくと分かりやすいかもしれません。 UIと一緒によく引き合いに出されるのがUX。これはUser Experienceのことを言い、Experienceのざっくりの意味は下記の感じです。 経験、体験 経験する、体験する つまりは、UIに対してユーザーが行った操作による経験や体験を意味し、そこから得られる満足を指します。 今回はユーザーの心を離さないゲームのUIデザインを作るために、心がけていることを紹介していきます。 色や形による
こんにちは。 2016年が始まりましたがみなさんいかがでしょうか。 今回はチームマネジメントついての記事を参考にしつつ、自分自身のチームに取り入れている内容を紹介していきます。 良い所などを可能な限り紹介して、みなさんの参考になればと思います。 1日2回のMTGとカンバン方式のタスク管理 自身のプロジェクトでは、1日2回のMTGとカンバン方式のタスク管理を行っています。 1日2回のMTG 1日2回、始業後と終業前に約15分ほどのMTGを決められた時間に行っています。 ●朝礼MTG 各自の本日のタスク共有 困っている事、気になっている事 ●終礼MTG 本日行ったタスク 困っている事、気になっている事 朝礼・終礼時にタスク共有を行う必要があるので、それまでに各自がタスク整理を行うようことが意識づけられる。 また、困っている事などをチーム内に共有されることで、1人では解決できないような問題がその
gem を更新したタイミングで、Grunt で sass をコンパイルしたら DEPRECATION WARNING というエラーが吐き出されまくったので、原因と対処方法の調査を行なうことにしました! エラー内容 [sourcecode lang="text"] DEPRECATION WARNING on line [num] of C:/Ruby200-x64/lib/ruby/gems/2.0.0/gems/compas s-core-1.0.3/stylesheets/compass/css3/_deprecated-support.scss: #{} interpolatio n near operators will be simplified in a future version of Sass. To preserve the current behavior, use
はじめに あけましておめでとうございます! 今年もどうぞよろしくお願いいたします!! 今年は地元福岡でとっても綺麗な初日の出が見られたので、気持ちも引き締まってなんだか色々といけそうな気がします…ふふ。 みなさまは初詣のおみくじはお済でしょうか(´ω`*)?…わたくしめは中吉でした! 可も不可もなく上を狙えるとのことなので、自分の書初めをしっかりと心に刻みつつ、今まで以上にコツコツと精進してまいりますッ それでは、本題へいってみましょう! 目次 基本 階層 フィルタ 基本 子 コンテンツ 可視性 フォーム 属性
デザイナーのgotoです。 今年ももう残すところあとわずか、来年からは採用に向けて企業が忙しくなる時期になります。 すでに2017年に向けて採用サイトを公開しているサイトも出てきています。 これから就活が始まる3月に向けて、さまざまな業種で新卒サイトや採用サイトを立ち上げるかと思います。 今回はその採用サイトに向けて2016年採用サイトを振り返りつつ2017年採用サイトも紹介していきたいと思います。 Yahoo http://hr.yahoo.co.jp/ Yahooの2017年度新卒採用、中途採用のサイトです。 「WHAT IS THIS NUMBER?」のページでは、Yahooの事業などがインフォグラフィックで表現されており、企業規模の大きさなどがよくわかります。 テレビ朝日 https://saiyo.tv-asahi.co.jp/2017/ テレビ朝日2017年採用ページで、TOP
次のページ
このページを最初にブックマークしてみませんか?
『SONICMOOV LAB』の新着エントリーを見る
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く