デザインビギナーズ第37回 もくもく

[willnet]

今日の成果を貼り付けましょう！

貼り付けの指針

みんなから意見をもらいやすいように、わかりやすく成果をまとめましょう！

• なるべく画像を使う
  • 写真をとって貼り付けたり、スクリーンショットをとってみたり
• 作業前、作業後の画像を貼る
• 力を入れた点や、見て欲しい点をコメントに書く

[yupa884]

趣味がハッカソンです

本日の目的

• ハッカソン等で出会うがなかなかコミュニケーションが取れないデザイナーさんの気持ちが知りたい
• ハッカソンで似非デザイナーになれるようになにかデザインツール的なものを使ってみたい

目標

• Fire Alpaca をダウンロードして使ってみよう
• 2015年12月26日〜27日に行われた 高知トマトハッカソン で作ったアプリのロゴを作ろう
• あわよくば2016年2月に開催予定のマイバイタルデータ可視化＆アクセサリー作りイベント レーザーカッターで作る☆自分のデータをオシャレに持ち歩こう！ のアクセサリーイメージを作ろう

成果

| ① | なんだか間の抜けた感じに |
| ② | 海に浮かべたらダサい色合いに |
| ③ | どこかの国の国旗のような感じに |

②は全体がpngのような感じになってしまいました＞＜　原因不明

①

②

③

学んだこと

• デザインをするのも難しく、デザインツールを使いこなすことも難しい。特にサイズ。
• 色彩感覚って非常に大事。
• markdown記述が出来て嬉しい。

皆様、お疲れ様でした。イベント開催ありがとうございます。

[willnet]

• ios の画面デザインしていました
• xcode 内での要素配置をするための autolayout という仕組みがあるのですが、使い方がよくわからず公式ドキュメントを読み始めました
  • Auto Layout Guide: Understanding Auto Layout
  • 先は長い 😓

before

after

[ir3]

今日やったこと

*CSSの実装について最新の動向を学ぶ → Rubyist のための CSS 勉強会 / nishiwaki. kobe css by machida

machidaさんいつもGJ! ありがとうございます！

*CSSを意味内容(変数、function,mixin,リセット,helpers,components,pages)によってグルーピングして管理することを学びました。

stylesheets

settings
　　変数
　　function
　　mixin
　　リセット(ブラウザ間の表示差異をなくしてデザインを入れる前のベースを作るファイル。Reset.css, Normalize.css,sanitize.cssなど)
helpers
components
　 atoms（原子）
　 molecules（分子）
　 organisms（有機体）
pages（ページ）
application.sass

BEM

BEMとは、Block（ブロック）、Element（要素）、Modifier（修飾）

Atomic Design

日本語記事 http://postd.cc/the-unicorn-workflow-design-to-code-with-atomic-design-principles-and-sketch/

[machida]

• 会社のサイト案を考えてました
• rails new したり、 自分の gem を更新したり、色を並べたりしたら時間になってしまいました

フォトショ

ブラウザ

[tatsuosakurai]

HTML5/CSS3 モダンコーディング p.57-p.83
middleman + haml + sass で写経

before

after

写経中にcssで文字が表示されなくなったりするので、確認方法ちょっと工夫が必要

[takahashi1984]

＜今日のやったこと＞
「Instagram APIを利用してユーザ情報(Json)を取得する。」の準備（スパイク）。

・作業前
　以下のコードが実行できない。
　$user_data = json_decode(@file_get_contents($user_api_url));

　原因：
　　file_get_contentsが実行できない。
　　事前に用意したレンタルサーバ側で allow_url_fopen がOFFになっている可能性あり。

・作業後
　curl_exec()にてAPIを実行する仕様に変更した。スパイク完了。

サンプルコード：